如何让twitter bootstrap模式closures（初始启动后）
我是一个小菜鸟，所以我觉得我正在监督一些（可能是明显的）twitter引导模式。 我想要做的是获得一个模式，只能在移动设备上启动。 这适用于在模态div上添加类.visible-phone。 到现在为止还挺好。 但是我希望它能够工作，这意味着你可以用Xbuttonclosures它。 我无法使button工作。
<div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> </ul> </div> </div> 在html的底部我把jquery.js（第一）和bootstrap.modal.js和bootstrap.transition.js。 其实所有的引导js模块（不要错过包括）。 我没有经验的JS ..
请原谅我，如果我提出了一个非常愚蠢的Q.我无法find日志中的具体情况的答案。
$('#myModal').modal('hide')应该这样做
如果closures引导程序模式对话框，则遇到问题：
$('#myModal').modal('show');
我解决了这个问题，通过以下链接打开对话框：
<a href="#myModal" data-toggle="modal">Open my dialog</a>
不要忘记初始化：
$('#myModal').modal({show: false});
我还使用了closuresbutton的以下属性：
data-dismiss="modal" data-target="#myModal"
将类隐藏添加到模式
<!-- Modal Demo --> <div class="modal hide" id ="myModal" aria-hidden="true" >
Javascript代码
<!-- Use this to hide the modal necessary for loading and closing the modal--> <script> $(function(){ $('#closeModal').click(function(){ $('#myModal').modal('hide'); }); }); </script> <!-- Use this to load the modal necessary for loading and closing the modal--> <script> $(function () { $('#myModal').modal('show'); }); </script>
.modal（'hide'）手动隐藏模式。 使用下面的代码来closures引导模型
$('#myModal').modal('hide');
看看在这里工作codepen
要么
试试这里
$(function () { $(".custom-close").on('click', function() { $('#myModal').modal('hide'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" 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">Modal title</h4> </div> <div class="modal-body"> <a class="custom-close"> My Custom Close Link </a> </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 -->
尝试指定button应该用数据目标closures的模式。 所以你的button应该看起来像下面这样 –
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
另外，您应该只需要bootstrap.modal.js，以便可以安全地删除其他人。
编辑：如果这不起作用，然后删除可见电话类，并在您的PC浏览器，而不是电话testing它。 这将显示你是否得到JavaScript错误，或者如果它的兼容性问题，例如。
编辑：演示代码
<html> <head> <title>Test</title> <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) ) { $("#myModal").modal("show"); } $("#myModalClose").click(function () { $("#myModal").modal("hide"); }); }); </script> </head> <body> <div class="modal hide" id="myModal"> <div class="modal-header"> <a class="close" id="myModalClose">×</a> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> </ul> </div> </div> </body> </html>
根据文档隐藏/切换应该工作。 但事实并非如此。
这是我如何做到的
$('#modal-id').modal('toggle'); //Hide the modal dialog $('.modal-backdrop').remove(); //Hide the backdrop $("body").removeClass( "modal-open" ); //Put scroll back on the Body
试试这个..
$('body').removeClass('modal-open'); $('.modal-backdrop').remove();
我在iPhone或桌面有同样的问题，没有设法按closuresbutton时closures对话框。
我发现<button>标签定义了一个可点击的button，并需要指定一个元素的types属性如下：
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
检查Bootstrap模块的示例代码： BootStrap javascript Page
如果同时显示几个模态，则可以使用属性data-toggle和data-target指定模态内button的目标模态：
<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title">Modal Title</h4> <small>Modal Subtitle</small> </div> <div class="modal-body"> <p>Modal content text</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button> </div> </div> </div> </div>
在模态代码之外的某个地方，您可以使用另一个切换button：
<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>
用户无法点击模式内切换button，而这些button隐藏，它正确的工作与选项"modal"属性data-toggle 。 这个计划工程automagicaly！
这里是一个片段，不仅closures模式而不刷新页面，但当按下input提交模式，并closures，而不刷新
我已经build立在我的网站上，我可以有多个模态和一些模态处理数据上提交和一些不。 我所做的是为每个处理的模态创build一个唯一的ID。 例如在我的网页中：
HTML（模态页脚）：
<div class="modal-footer form-footer"><br> <span class="caption"> <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button> <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a> </span> </div>
jQuery的：
$(document).ready(function(){ // Allow enter key to trigger preloadorders form $(document).keypress(function(e) { if(e.which == 13) { e.preventDefault(); if($(".trigger").is(".ok")) $("#PreLoadOrders").trigger("click"); else return; } }); });
正如你可以看到这个提交执行处理，这就是为什么我有这个模式的jQuery。 现在让我们说，我有这个网页中的另一个模式，但没有进行处理，因为一个模式是打开的时候我把另一个$(document).ready()在全球PHP / JS脚本所有网页得到，我给模态的closuresbutton一个叫".modal-close" ：
HTML：
<div class="modal-footer caption"> <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button> </div>
jQuery（包括global.inc）：
$(document).ready(function(){ // Allow enter key to trigger a particular button anywhere on page $(document).keypress(function(e) { if(e.which == 13) { if($(".modal").is(":visible")){ $(".modal:visible").find(".modal-close").trigger('click'); } } }); });
