大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap模式堆栈删除浏览器滚动条,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
现在虽然示例按预期工作,
第一个模态可以扩展需要滚动的页面高度.
然而,如果是这种情况,并且较小的模态在顶部堆叠,则滚动条被移除,
即使较小的模态被解除,也不会出现.
<button name="openModalOne">Open 1</button> <div id="modalone" class="modal" role="dialog" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3>Modal 1</h3> </div> <div class="modal-body" style="height: 2000px"> <button name="stackone">Stack me</button> </div> <div class="modal-footer"> <button name="cloSEOne">Button 1</button> </div> </div> </div> </div> <div id="modaltwo" class="modal" role="dialog" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3>Modal 1</h3> </div> <div class="modal-body"> This is a stacked modal </div> <div class="modal-footer"> <button name="closetwo">Close</button> </div> </div> </div> </div> $(document).ready(function(){ $('.modal').on('hidden.bs.modal',function( event ) { $(this).removeClass('fv-modal-stack'); $('body').data( 'fv_open_modals',$('body').data('fv_open_modals')-1); }); $('.modal').on('shown.bs.modal',function(){ if ( typeof ( $("body").data( 'fv_open_modals' ) ) == 'undefined') { $('body').data( 'fv_open_modals',0 ); } if($(this).hasClass('fv-modal-stack')) { return; } $(this).addClass('fv-modal-stack'); $('body').data('fv_open_modals',$('body').data('fv_open_modals')+1); $(this).css('z-index',1040 +(10*$('body').data('fv_open_modals'))); $('.modal-BACkdrop').not('.fv-modal-stack') .css('z-index',1039 + (10*$('body').data('fv_open_modals'))); $('.modal-BACkdrop').not('fv-modal-stack') .addClass('fv-modal-stack'); }); $("button[name='openModalOne']").on('click',function(){ $("#modalone").modal('show'); }); $("button[name='stackone']").on('click',function(){ $("#modaltwo").modal('show'); }); $("button[name='closetwo']").on('click',function(){ $("#modaltwo").modal('hide'); }); $("button[name='cloSEOne']").on('click',function(){ $("#modalone").modal('hide'); }); });
有没有办法指示浏览器内容的真实高度?
以上是大佬教程为你收集整理的jquery – Bootstrap模式堆栈删除浏览器滚动条全部内容,希望文章能够帮你解决jquery – Bootstrap模式堆栈删除浏览器滚动条所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。