twitter-bootstrap – Bootstrap模态弹出,但有一个“有色”的页
发布时间:2020-12-18 00:19:42 所属栏目:安全 来源:网络整理
导读:我正在使用引导来设置模态弹出窗口.当单击按钮时,将打开模态对话框,但整个页面略有“有色”,我无法与模态(页面基本上冻结)进行交互.你知道为什么会这样吗?这是代码: 按钮: a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href=
我正在使用引导来设置模态弹出窗口.当单击按钮时,将打开模态对话框,但整个页面略有“有色”,我无法与模态(页面基本上冻结)进行交互.你知道为什么会这样吗?这是代码:
按钮: <a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a> 模式: <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Congratulations!</h4> </div> <div class="modal-body"> <h4>Text in a modal</h4> <p>Duis mollis,est non commodo luctus,nisi erat porttitor ligula.</p> <h4>Popover in a modal</h4> <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> <hr> <h4>Overflowing text to show optional scrollbar</h4> <p>body</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 编辑: 以下是附带的文件: <link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css"> <link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css"> <link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"> <link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <script src="http://crowdtest.dev:8888/assets/js/script.js"></script> <script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script> <script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script> 编辑:发生在所有浏览器尝试(Chrome,Firefox,Safari) 解决方法
好的,所以我想出了这个问题.
如果模态容器具有固定位置或位于具有固定位置的元件内,则会发生此行为. 最简单的方法是移动模态的div,使其在任何具有特殊定位的元素之外.一个好的地方可能就在关闭身体标签之前. 这是我做的,它的工作. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |