javascript - 当我点击除所选区域之外的任何地方时模态关闭

Question

我制作了三个盒子，每个盒子都有自己的按钮，单击它们各自的模式就会弹出，当我单击其他任何地方时，它们就会靠近，您可以通过我在下面共享的链接看到。现在出现的问题是，当我单击模式本身(在模式上)时，它会关闭，这是错误的。我正在尝试解决这个问题，但没有得到任何足够的解决方案，可能会得到你们的帮助。

enter link description here

片段:

$(window).on('load', function () {
    $(".btnOne").click(function (event) {
        event.stopPropagation();
        $(".modalOne").addClass("open");
        $(".modalTwo").removeClass("open");
        $(".modalThree").removeClass("open");
    });
    $(".btnTwo").click(function (event) {
        event.stopPropagation();
        $(".modalTwo").addClass("open");
        $(".modalThree").removeClass("open");
        $(".modalOne").removeClass("open");
    });
    $(".btnThree").click(function (event) {
        event.stopPropagation();
        $(".modalThree").addClass("open");
        $(".modalOne").removeClass("open");
        $(".modalTwo").removeClass("open");
    });
  
    //Keep an eye on this part 
    $('html').click(function () {
        $(".modal").removeClass("open");
    });
});

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
html,
body {
    margin: 0;
    padding: 0;
}
.container {
    width: 1170px;
    margin: 20px auto;
}
.box {
    float: left;
    width: 300px;
    height: 300px;
    margin: 0 10px;
    padding: 20px;
    position: relative;
    border-radius: 5px;
    background: #eee;
}
.btn {
    float: left;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    position: relative;
    border: 0;
    border-radius: 5px;
    text-transform: uppercase;
    outline: 0;
    z-index: 2;
    background: #f00;
}
.modal {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
}
.modal.open {
    opacity: 1;
    z-index: 3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">
        <div class="box">
            <button type="button" class="btn btnOne">button</button>
            <div class="modal modalOne">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
        </div>
        <div class="box">
            <button type="button" class="btn btnTwo">button</button>
            <div class="modal modalTwo">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
        </div>
        <div class="box">
            <button type="button" class="btn btnThree">button</button>
            <div class="modal modalThree">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
        </div>
    </div>

Answer 1

诀窍是检查.modal.open

$('html').click(function(evt) {
  if (!$(evt.target).closest(".modal").is(".modal.open")) {
    $(".modal.open").removeClass("open");
  }
});

看看这个:http://jsfiddle.net/7ecpx3pg/