Question

我一直在使用模式弹出窗口，在该窗口中显示图像并在图像上做标签。模态效果很好，并且图像显示完美，但是我面临的问题是，当我借助按钮关闭模态时，即使关闭模态后，模态背景也会逐渐消失在主窗口中。

我已附上以下代码：

HTML ：（情态）

<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close">&times;</span>

<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<img class="modal-content" id="img01">
</div>
<div class="text_container">

  <br>
  <div class="input_tag">
    <span class="right_sec_text">Select a region from the picture</span>
    <div class="tags">

                    </div>
    <div class="input_box">
                                <input type="text" name="tags" class="input_textbox">
                  <button id="settag" class="btn_settag">Set Tag</button>
    </div>
    <div class="footer_btn">
      <p><button class="btn_success">Confirm Selection</button>
      <p><button class="btn_cancel" >Cancel</button>

    </div>
  </div>
</div>
</div>

Javascript ：（用于模式和图像上方的框）

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

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("imgside");
var modalImg = document.getElementById("img01");
img.onload = function(){
modal.style.display = "block";
modalImg.src = this.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

function preview(img, selection) {
        if (!selection.width || !selection.height)
            return;
        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
        $('.img_error').removeClass("error");
    }

  $(function() {
  $('#img01').imgAreaSelect({
  handles: true,
  fadeSpeed: 200,
  onSelectChange: preview
 });
 });

$(".btn_cancel").click(function(){
$('#myModal').hide();
$('.imagearea').removeClass().removeAttr('style');
$('.modal-backdrop').remove();
});

图片1 ：（带有图片的模式）

图片2 ：（关闭后为模态）

当尝试单击btn_cancel按钮时，我尝试从模式中删除样式和div，但没有用。有人可以帮我解决这个问题。

Answer 1

在没有img01但使用引导程序模式的情况下，无法尝试在JSFiddle中进行复制，您应该使用$('#myModal').modal('hide')隐藏

参考来源：https://getbootstrap.com/docs/4.4/components/modal/#modalhide

关闭后仍保留模式弹出窗口背景

1 个答案: