Question

我有一些内容的div。我想点击div上的任何地方来打开模态。我试过下面的代码。这很好用，除非点击div中的用户名链接，在页面重定向到正确的链接之前，模态会短暂打开。有没有办法逃脱div内部链接的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>


<!-- Modal -->
<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

您是否尝试从模式切换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且链接具有ID“上面的链接”：

<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模式

2 个答案: