Question

我正在创建一个带有背景的模态，就像twitter bootstrap一样。当我点击背景模态时应该隐藏哪个工作正常。但是当我点击om模态时，它会自动消失，这不应该发生。请帮忙。

//when button is clicked open modal
                $(".modals").click(function(){
                    //.abovepage should appear
                    $(".abovepage").show();
                    $(".pagecontent").show('slow');
                });
// When backdrop is clicked close modal
                $(".abovepage").click(function(){
                    $(this).hide();
                });

HTML

<body id="wholepage">
        <div id="maincontent">
            <div id="innercontent">
                <button class="modals" data-id="large"><a href="#">Large Modal</a></button>
                <button class="modals" data-id="small"><a href="#">Small Modal</a></button>

            </div>
        </div>
        <div class="abovepage">
            <div class="pagecontent large">
                <div class="element" data-clicked="no">
                    <div class="upper">
                        <div class="uppercontent"data="modal" >
                            Large Modal 

                        <span id="closebutton"><a href="#">x</a></span>
                        </div>
                    </div>
                    <div class="lower">
                        <div class="lowercontent">
                        ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

Answer 1

这是因为modal是叠加层的子元素，并且您在点击时隐藏它的父元素（.abovepage），因此它也隐藏了模态。一个解决方案就是：

$(document).ready(function () {
    //when .modals is clicked 
    $(".modals").click(function () {
        //.abovepage should appear
        $(".abovepage").show();
        $(".pagecontent").show('slow');
    });
    $(".abovepage").click(function () {
        $(".pagecontent").hide();
        $(this).hide();
    });
});

#maincontent {
    height:60px;
}
#innercontent {
    height:40px;
    margin:10px;
}
.modals {
    height:40px;
    background-color: #6596EE;
    border:solid 1px #3B7EF7;
    border-radius: 3px;
}
.modals a {
    text-decoration: none;
    font-weight: bold;
    font:16px arial;
    color: white;
}
.modals:hover {
    background: #122A55;
}
.abovepage {
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #3D3C3C;
    opacity: 0.6;
    display:none;
}
.pagecontent {
    height:100px;
    margin-top: 52px;
    margin-bottom: 30px;
    display:none;
}
.large {
    width:900px;
    margin-left: 230px;
    margin-right: 222px;
}
.small {
    width:250px;
    margin-left: 511px;
    border-radius: 3px;
}
.element {
    height:100px;
    background-color: white;
    box-shadow:3px 3px 8px 3px #030303;
    position:relative;
    top:0px;
    left:0px;
    border:solid 1px #1D1B1B;
    border-radius: 5px;
}
.upper {
    height:50px;
    border-bottom: solid 1px #D3C8C8;
}
.lower {
    height:50px;
}
.uppercontent {
    height:25px;
    padding-top: 15px;
    padding-left: 14px;
    padding-right: 9px;
    font-weight:bold;
    font:18px arial;
}
.lowercontent {
    height:25px;
    padding-top: 15px;
    padding-left: 14px;
}
#closebutton {
    float:right;
}
#closebutton a {
    text-decoration:none;
    color:#C4BBBB;
    font-weight: bold;
    font-size:18px;
}
#closebutton a:hover {
    color:#333232;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="wholepage">
    <div id="maincontent">
        <div id="innercontent">
            <button class="modals" data-id="large"><a href="#">Large Modal</a>
            </button>
            <button class="modals" data-id="small"><a href="#">Small Modal</a>
            </button>
        </div>
    </div>
    <div class="abovepage"></div> <!-- here close div -->
        <div class="pagecontent large">
            <div class="element" data-clicked="no">
                <div class="upper">
                    <div class="uppercontent" data="modal">Large Modal	<span id="closebutton"><a href="#">x</a></span>

                    </div>
                </div>
                <div class="lower">
                    <div class="lowercontent">...</div>
                </div>
            </div>
        </div>

从叠加层移除模态内容（。abovepage）。

Answer 2

jQuery通过event参数调用您的点击功能，您可以在其中调用它的stopPropagation方法，以防止它出现＆＃34;冒泡＆＃34; DOM树的事情。

$(".pagecontent").click(function(event){
    event.stopPropagation();
});

如何在jquery中停止事件冒泡。

2 个答案: