Modal從Twitter下拉鍊接引導啓動

我想從我的下拉菜單中的鏈接有模式啓動。該模式似乎啓動（該網站變灰），但無法看到。不在下拉菜單中的常規鏈接的模式很好。我用jquery騙過了，但是因爲我是jquery的新手，所以什麼都沒有解決。這是我的網站代碼。Modal從Twitter下拉鍊接引導啓動

<nav class="pull-right"> 
<ul class="nav"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Item<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <div id="DeleteItem" class="modal hide fade"> 
       <div class="modal-header"> 
        <a data-dismiss="modal" class="close">×</a> 

        <h3>Delete My Item?</h3> 
       </div> 
       <div class="modal-body"> 
        <p>Are you sure you really want to delete My Item?</p> 
       </div> 
       <div class="modal-footer"> 
        <a rel="nofollow" data-method="delete" class="btn btn-primary" href="/items/myitem">Delete 
         Item</a> 
        <a data-dismiss="modal" class="btn" href="#">Cancel</a> 
       </div> 
      </div> 
      <!-- Delete Item Modal --> 
      <li><a href="/items/myitem/edit">Edit Item</a></li> 
      <li><a data-toggle="modal" data-target="#DeleteItem" href="/items/myitem">Delete Item</a></li> 
     </ul> 
    </li> 
</ul>

這裏是在的

<!-- Javascript placed at the end of the document so the pages load faster --> 

<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script>

末的JavaScript文件，這裏是我的Rails代碼，以防萬一。

<li class="dropdown"> 
      <a data-toggle="dropdown" class="dropdown-toggle" href="#"><%= @item.name %><b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <%= render "items/delete" %><!-- Delete Item Modal --> 
       <li><%= link_to 'Edit Item', edit_item_path(@item) %></li> 
       <li><%= link_to 'Delete Item', @item, 
           "data-toggle" => "modal", "data-target" => "#DeleteItem" %></li> 
      </ul> 
     </li> 

    <div class="modal hide fade" id="DeleteItem"> 
    <div class="modal-header"> 
    <a class="close" data-dismiss="modal">×</a> 
    <%= content_tag :h3, "Delete #{@item.name}" + "?" %> 
    </div> 
    <div class="modal-body"> 
    <%= content_tag :p, "Are you sure you really want to delete #{@item.name}" + "?" %> 
    </div> 
    <div class="modal-footer"> 
    <%= link_to 'Delete Item', @item, method: :delete, :class => "btn btn-primary" %> 
    <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
    </div> 
</div>

來源

2012-03-01 drumonii

我相信你可以通過包括導航欄結構內的模態div元素運行到一個問題。我的直覺是你應該把它包含在你的標記結尾附近。

來源

2012-03-02 14:01:01 whazzmaster

就是這樣！謝謝！我只是關閉文檔，他們將模態div放在鏈接的上方。 – drumonii 2012-03-05 05:37:45

@ cooldman224你可以更新有效的答案嗎？它在標記結束時有點模糊〜。 – Nishant 2012-10-11 12:49:26

Modal從Twitter下拉鍊接引導啓動

回答

相關問題