單擊導航欄鏈接時不顯示模態

Question

我目前正試圖實現一種模式，單擊導航欄中的鏈接時將顯示該模式。我知道類似的問題已經被問到，但是沒有一個解決方案可以工作。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">My Tool</a> 
</div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">FAQ</a></li> 
     <li><a href="#">About</a></li> 
     <li><a data-toggle="modal" data-target="#myModal">Add Something</a></li> 
    </ul> 
    </div> 
</div> 
</nav> 

<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-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    ... 
    </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> 

腳本我使用的是：bootstrap.js，bootstrap.min.js，jQuery的2.1.4.min.js PS：我已經嘗試了HREF =」 ＃「在鏈接中。 感謝您的幫助！

Answer 1

試試這個： （我只插在正確的依賴關係，你的代碼工作）

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">My Tool</a> 
</div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">FAQ</a></li> 
     <li><a href="#">About</a></li> 
     <li><a data-toggle="modal" data-target="#myModal">Add Something</a></li> 
    </ul> 
    </div> 
</div> 
</nav> 

<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-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    ... 
    </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>