Question

我在项目中使用bootstrap模式。在一个页面中，我有2个容器，其中一个在另一个容器内。外部的一个在点击事件上有一个模态触发器，内部一个具有到另一个页面的路由。如果我点击外部容器，我可以获得模态弹出窗口。这没关系，但问题是如果我点击较小的容器，模态也会在路由前触发。

<div class="outer" data-toggle="modal" data-target="#exampleModal">          
    <a href="somewhere">
        <div class="inner></div>
    </a>                                             
</div>

如果单击内部容器，如何阻止弹出窗口。我知道我可以取消模态，如果我抓住内容器的悬停事件，但我看起来更多的引导方式。

Answer 1

稍微更改了你的HTML。我把链接放在内部div中。然后使用jquery，你可以停止传播。

<div class="outer" data-toggle="modal" data-target="#exampleModal">      
    sadsdaddsads<br/>
    asdsddsa<br/>

        <div class="inner"><a href="somewhere">asadds</a>  </div>

</div>

       <script>
            $(document).ready(function() {
                $('.outer > .inner').click(function(e) {
                    //alert("inner div clicked");
                    e.stopPropagation();
                });

            });

        </script>

防止二级容器中的自动模态

1 个答案: