广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    bootstrap模态对话框多个弹出框bug修复

    2018-04-08 09:04:41 次阅读 稿源:互联网
    零七广告

    bootstrap 2.3.2在同一个页面使用多个弹出对话框时,点击几次之后弹出框会消失和不可用。

    之前没发现,现在才知道。

    下面这个代码bootstrap的加载load的方法。

    <h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3><br /><a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br /><h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3><br /><a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br /><!-- Modal --><div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-header">    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>    <h3 id="myModalLabel">Click outside modal to close it</h3>  </div>  <div class="modal-body">    <p>One fine body…this is getting replaced with content that comes from passed-in href</p>  </div>  <div class="modal-footer">    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>    <button class="btn btn-primary">Save changes</button>  </div></div>
    $('a[data-toggle="modal"]').on('click', function(){ // update modal header with contents of button that invoked the modal $('#myModalLabel').html( $(this).html() ); //fixes a bootstrap bug that prevents a modal from being reused $('#utility_body').load( $(this).attr('href'), function(response, status, xhr) { if (status === 'error') { //console.log('got here'); $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>'); } return this; } ); });

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告