如何让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">&times;</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-toggledata-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&nbsp; <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&nbsp; <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'); } } }); });