使整个 div 打开 bootstrap 模态

Question

我有一个 div 有一些内容。我想在 div 上的任意位置单击以打开模式。我试过下面的代码。这工作正常，除非在 div 中单击用户名 link ，模式会在页面重定向到正确的 link 之前短暂打开。有没有办法逃避 div 内 link 的 bootstrap 模态点击？

<div data-toggle="modal" data-target="#post-<%= post.id %>-content"> <div class="post-div"> <%= link_to post.user.name, post.user %> <br/><span class="title"><%= post.title %></span> <br/><%= post.summary %> </div> </div>  <div class="modal fade" id="post-<%= post.id %>-content" tabindex="-1" role="dialog" aria-labelledby="post-<%= post.id %>-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="post-<%= post.id %>-label"><%= post.title %></h4> </div> <div class="modal-body"> <%= post.content %> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 1

您是否尝试过将用户名 link 从模式切换 div 中拉出来？类似于：

    <%= link_to post.user.name, post.user %> 
    <div data-toggle="modal" data-target="#post-<%= post.id %>-content">
       <div class="post-div">           
           <br/><span class="title"><%= post.title %></span>
           <br/><%= post.summary %>                
       </div>
    </div>

Answer 2

假设您已加载 jQuery 并且 link 具有 ID 'the-link-above':

<div data-toggle="modal" data-target="#post-<%= post.id %>-content">
    <div class="post-div">
        <%= link_to post.user.name, post.user %>
        <script>
        $('#the-link-above').on('click', function(event) {
            event.stopPropagation();
        });  
        </script>
        <br/><span class="title"><%= post.title %></span>
        <br/><%= post.summary %>                
    </div>
</div>

另外，你可能会喜欢这个：http://nakupanda.github.io/bootstrap3-dialog/

使整个 div 打开 bootstrap 模态

Make entire div open bootstrap modal

erb

twitter-bootstrap