Question

我一直在研究使用the imgAreaSelect jQuery plugin标记图像的代码。为此，我有一个模态，单击图像时会弹出该模态，模态中包含标记图像的内容。这部分工作正常。我面临的问题是当我关闭模态时，即使在模态关闭后，我在图像上绘制的边界框仍然保留。我想删除该模式背景，但我不知道如何进行。

我在下面附加了Jsfiddle的链接 https://jsfiddle.net/Uviii/rb67myvn/2/

HTML：

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

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

    <!-- Modal Content (The Image) -->
    <div id="imagearea" class="imagearea">
        <div class='dynamic_text' style='display:none;'></div>
        <img class="modal-content" id="img01" src="fashion.jpg">
    </div>

    <div class="text_container">
        <br>
        <div class="img_text"></div>
        <div class="input_tag">
            <span class="right_sec_text">Select a region from the picture</span>
            <div class="error"></div>
            <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>

            <input type="hidden" name="x1" id="x1" value="-">
            <input type="hidden" name="y1" id="y1" value="-">
            <input type="hidden" name="x2" id="x2" value="-">
            <input type="hidden" name="y2" id="y2" value="-">
            <input type="hidden" name="w" id="w" value="-">
            <input type="hidden" name="h" id="h" value="-">

            <div class="footer_btn">
                <p><button class="btn_success">Confirm Selection</button>
                <p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
            </div>
        </div>
    </div>
</div>

脚本：

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
    });
});

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.onclick =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";
 }

下面的第一张图片是带有图片和边框的模态：

下一张图片显示了关闭模态并且边界框的灰度保持不变

有人可以帮我解决这个问题吗？

Answer 1

我找到了a mirror of the docs（主站点is bust），并且注意到了parent选项。我猜想这可能是相关的，因为您的模态是一个隐藏/显示的块元素，与默认父元素body不同。

所以我补充说：

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

它有效-here's a working fork of your JSFiddle。

注释：

您的JSFiddle仅具有到imgAreaSelect源的相对链接，这些链接当然不起作用（它们在https://jsfiddle.net/上不存在）。我找到了the Javascript and CSS on CDNJS，并将它们添加到我的JSFiddle中。
您的JSFiddle包括jquery.imgareaselect.pack.js 和 jquery.imgareaselect.js-我想这可能是同一个库的2个副本，一个压缩，一个没有？您应该只包括一个！
您正在使用jQuery作为选择器和事件处理程序，但也使用普通的Javascript来完成相同的事情，所有这些都混杂在一起。从技术上讲，这没有什么错，但是IMO很难阅读，理解和使用。使用jQuery需要付出一定的代价-加载较大的外部库意味着页面加载速度降低，页面呈现速度降低等-因此，如果您要为此付出代价，则不妨使用它。例如：
```
// Plain Javascript
var modal = document.getElementById("myModal");
img.onclick = function() {
    // ....
}

// in jQuery
var modal = $('#myModal');
img.on('click', function() {
    // ...
});
```

Here's a 2nd JSFiddle，并应用了这些更改。

更新

如评论中所述，如果再次打开图像模态，选择仍然可见...我通过以下方法解决了这个问题：

1）使用instance: true选项返回插件实例ias;

// New var for the instance 
var ias;

$(function() {
    ias = $('#img01').imgAreaSelect({
        instance: true,
        // ... etc
    });
});

2）在关闭处理程序中对该实例调用cancelSelection方法。

span.on('click', function() {
    modal.css('display', "none");

    // Now we can call methods on the instance
    ias.cancelSelection();
});

我用此新代码更新了the 2nd JSFiddle。

模式关闭后，背景仍保留在边界框内

1 个答案: