引导 - 模态不工作

问题描述：

<body> 
<div class="modal fade" id="pageopen" 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"> 
        x 
       </button> 
       <h4 class="modal-title" id="myModalLabel"> 
        This Modal title 
       </h4> 
      </div> 
      <div class="modal-body"> 
       Add some text here 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary"> Submit changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal --> 
</div> 

<button onclick="showModal('http://www.google.co.id/')">Show Modal</button> 

</body>

我已经添加了最新的jQuery，引导JS和CSS只模态插件。
我遇到的问题是，模态背景显示，但模态标题正文等不显示。

My Code

请提供解决方案，谢谢

按钮如何链接到模态？请访问http://getbootstrap.com/javascript/#modals并查看“

答

你的JavaScript代码是错误的，打开一个自举3莫代尔，你应该使用：

$('#pageopen').modal({ 
     show: true 
});

如果你想加载一个外部页面，你可以在这里设置网址：

$('#pageopen').modal({ 
    show: true, 
    remote: 'http://www.example.com' 
});

并更好地使用jQuery点击功能而不是“onClick”。

啊，谢谢。这正是我需要的。顺便说一句，我的网页中的问题是因为我加载了2个独立的css作为引导程序，所以模态类互相重叠，只是破坏了模态样式。无论如何感谢您的解决方案 – godheaper 2014-08-27 08:46:39

答

你的问题是，showModal功能不受onclick发现，请停止你的HTML中使用的onclick永远。这从来不是一个好的做法。取而代之的是设置按钮的ID和使用的JQuery的.click功能：

<button id="showModal">Show Modal</button> 

$("#showModal").click(function(){ 
    $('#pageopen').modal(); 
});

Check JSFiddle Demo

谢谢您的解决方案。我会记得下次不要使用html事件。 – godheaper 2014-08-27 08:47:24

答

哈哈，没关系。对于相同的引导组件，我有单独的js和css，因此它们相互重叠。

引导提示：
始终只加载一个js文件和一个css文件进行引导。
如果你像我一样，只想引导的一部分，而不是所有的包（例如：模态，转换和旋转木马），然后把它作为一个js和css从getbootstrap

引导 - 模态不工作

相关推荐