Question

单击侧面时，Bootstrap模态不会关闭。我查看了一些问题，但我找不到能帮助我的结果。

我的JS代码

获取模态

var modal = document.getElementById('myModal');

获取图像并将其插入模态中 - 使用其“alt”文本作为标题

var img = $('.myImg');
  var modalImg = $("#img01");
  var captionText = document.getElementById("caption");
  $('.myImg').click(function(){
      modal.style.display = "block";
      var newSrc = this.src;
      modalImg.attr('src', newSrc);
      captionText.innerHTML = this.alt;
  });

获取关闭模态的元素

var span = document.getElementsByClassName("close")[0];

当用户点击（x）时，关闭模态

span.onclick = function() {
    modal.style.display = "none";
  }`

我的HTML：

<div class="col-12 col-md-4">
                <img class="myImg img-product img-center" src="img/necklaces/1.jpg">
            </div>

<div id="myModal" class="modal">
    <!-- The Close Button -->
        <span class="close" style="color: white;" onclick="document.getElementById('myModal').style.display='none'"><i class="fa fa-times" aria-hidden="true"></i></span>
    <!-- Modal Content (The Image) -->
        <div class="modal-content">
            <p class="modal-title">Molekula no. 2 </p>
            <img class="modal-content" id="img01" style="border: none;">
        </div>
    <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
</div>

请帮帮我。 THX。

Answer 1

您可以使用$(document).click(function(e) {});执行此操作，当e是被点击的元素时，使用该功能我们可以执行此操作：

检查点击的元素class name是否在模型内return否则如果点击的元素是近距离，则关闭模型否则如果上述非元素关闭模型

$(document).click(function(e) {

    var target = $(e.target);
    var eclass = target.attr('class');
    if(eclass == "close"){
    $(".model").hide();
    }
    else if(eclass == "model" || eclass == "modelimg" || eclass == "caption"){
    return;
    }
    else{
    $(".model").hide();
    }
});

.container{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 500;
	position: fixed;
}

.model{
	z-index: 1000;
	top: 5px;
	position: absolute;
	background-color: white;
	overflow-y: auto;
	overflow-x: hidden;
	width: 150px;
	height: 150px;
	right: 30%;
	box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 1); 
	text-align: center;
  border-radius: 3px;
}
img{width:100%;}
.close{
position:absolute;
right:5px;
top:5px;
background:white;
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
  <div class="model">
      <img class="modelimg"  src="https://media.nationalgeographic.org/assets/photos/000/285/28537.jpg"  alt="This is the moroccan sahara" />
      <div class="caption">
      <span class="caption">The morocan sahara</span>
      </div>
      <span class="close">X</span>
  </div>
</div>

单击侧面时，Bootstrap模态不会关闭

1 个答案: