引導 - 模態不工作

我有模式設置這樣引導 - 模態不工作

<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

請提供解決方案，謝謝

來源

2014-08-27 godheaper

按鈕如何鏈接到模態？請訪問http://getbootstrap.com/javascript/#modals並查看「

你的JavaScript代碼是錯誤的，打開一個自舉3莫代爾，你應該使用：

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

如果你想加載一個外部頁面，你可以在這裏設置網址：

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

並更好地使用jQuery點擊功能而不是「onClick」。

來源

2014-08-27 08:40:52 derdida

啊，謝謝。這正是我需要的。順便說一句，我的網頁中的問題是因爲我加載了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

來源

2014-08-27 08:38:43 Moshtaf

謝謝您的解決方案。我會記得下次不要使用html事件。 – godheaper 2014-08-27 08:47:24

哈哈，沒關係。對於相同的引導組件，我有單獨的js和css，因此它們相互重疊。

引導提示：
始終只加載一個js文件和一個css文件進行引導。
如果你像我一樣，只想引導的一部分，而不是所有的包（例如：模態，轉換和旋轉木馬），然後把它作爲一個js和css從getbootstrap

來源

2014-08-27 08:44:34 godheaper

引導 - 模態不工作

回答

相關問題