关闭后仍保留模态弹出背景答案

【问题标题】：Modal popup backdrop remain after closing关闭后仍保留模态弹出背景
【发布时间】：2020-08-27 06:11:25
【问题描述】：

我一直在处理一个模态弹出窗口，在该窗口中显示图像并在图像上添加标签。模态效果很好，图像显示完美，但我面临的问题是，当我在按钮的帮助下关闭模态时，即使在模态关闭后，模态背景淡入仍保留在主窗口中。

我已附上以下代码：

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，但它不起作用。谁能帮我解决这个问题。

【问题讨论】：

当模态的 id 改变时我看到了这个。您的模态是否包含在某种类型的服务器端代码中？
@clamchoda 是的，它在 PHP 代码中，我在其中动态获取模式中的图像
将带有 id 的标头移到服务器端代码之外或使其成为静态。或者点击关闭按钮后拨打$('body').removeClass('modal-open'); $('.modal-backdrop').remove();。
@clamchoda 我将它放在服务器端代码之外，但它仍然无法正常工作。你能告诉我如何使它成为静态的

标签： javascript html jquery css bootstrap-modal

【解决方案1】：

如果没有 img01，则无法尝试在 JSFiddle 中复制，但使用引导模式时，您应该使用 $('#myModal').modal('hide') 隐藏

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

【讨论】：

当我使用 $('#myModal').modal('hide') 时它不起作用。