Bootstrap的模態不工作

我試圖測試我的項目的示例模態，但即使從jfiddles代碼不工作在我身上。當我點擊按鈕時，它只會給我一個變暗的窗口。我也試圖谷歌這個，但沒有給我什麼Bootstrap的模態不工作

這是模式代碼即時嘗試。

<body> 
<p>Link 1</p> 
    <a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> 

    <p>&nbsp;</p> 


    <p>Link 2</p> 
    <a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> 

    <div class="modal hide" id="addBookDialog"> 
    <div class="modal-header"> 
     <button class="close" data-dismiss="modal">×</button> 
     <h3>Modal header</h3> 
     </div> 
     <div class="modal-body"> 
      <p>some content</p> 
      <input type="text" name="bookId" id="bookId" value=""/> 
     </div> 
    </div> 

     <script src="js/jquery-1.10.2.min.js"></script> 
      <script src="js/bootstrap.min.js"></script> 
      <script src="js/ckeditor.js"></script> 
    <script type="text/javascript"> 
    $(document).on("click", ".open-AddBookDialog", function() { 
     var myBookId = $(this).data('id'); 
     $(".modal-body #bookId").val(myBookId); 
    }); 
</script>

感謝您的幫助。

來源

2014-01-21 rapidoodle

Demo

你缺少data-target顯示。

<a data-target="#myModal" data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal">test</a> 

<div id="myModal" role="dialog"> 
    .... 
</div>

來源

2014-01-21 12:55:19 Anup

我明白了。多謝，夥計。 – rapidoodle

從Bootstrap's demo

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button>

採取的模式是通過data-target屬性有針對性的，而不是像href你這裏。

來源

2014-01-21 12:51:07

我明白了。謝謝！ – rapidoodle

Bootstrap的模態不工作

回答

相關問題