Javascript保持模态隐藏答案

【问题标题】：Javascript keeps modal hiddenJavascript保持模态隐藏
【发布时间】：2019-03-21 21:14:40
【问题描述】：

我在下面的一些 JS 中遇到了两个小问题，涉及模态和克隆/附加图像：

单击按钮会打开模态，该模态包含一个搜索栏，该搜索栏使用图像填充内容。单击图像时，它会被克隆并附加到另一个 div 中（在主页上的模态框之外），并且模态框关闭。

完成一次后，按钮单击不再打开模态框。如何更改以使图像的附加关闭模态但可以重新打开？此外，一旦图像被附加到一个新的 div，如果我点击它，它就会消失。有没有办法只附加没有类标签的图像源，以便在新 div 中单击它不会使其消失？

    function appendSomeItems(url, id, name, style) {
        return '<div><div class="md-card md-card-hover">         <div class="gallery_grid_item md-card-content getImage"> <img class ="uk-align-center imageClick" src="https://media.testsite' + url + '" alt=""></a>                               <div class="gallery_grid_image_caption">                                   <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';
    }

    $(document).on('click', '.imageClick', function handleImage() {
        console.log('good');
        var img = $(this).closest(".getImage").children("img").clone(true);
        $("#holdImage").html('');
        $("#holdImage").append(img);
        $('#image-modal').hide();
    });

   <!--image placeholder->
   <div id="holdImage" style="margin-top: 15px;">                      
   </div>

   <!--open modal-->
   <div style="text-align: center;">
   <a href="#image-modal" data-uk-modal class="uk-button uk-button-primary">Choose an existing image</a>
   </div>

   <!--Modal-->
   <div id="image-modal" class="uk-modal">
    <div class="uk-modal-dialog" style="width:80%;">
        <a class="uk-modal-close uk-close"></a>
        {!! Form::open(array('id' => 'search_form')) !!}
        <div class="uk-grid">
            <div class="uk-width-1-1">
                <div class="md-card">
                    <div class="md-card-content">
                        <div class="input-group">
                            <input type="text" class="md-input" placeholder="Search" name="srch-term" id="srch-term">
                            <p class="text-center">Search for images by Name </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {!! Form::close() !!}

        <br/>
        <div id="imageResult" class="gallery_grid uk-grid-width-medium-1-5 uk-grid-width-large-1-6" data-uk-grid="{gutter: 16}">
        </div>
        <button style="display: none;" id="hidden_button"></button>
    </div>
</div>

【问题讨论】：

请发布随附的 HTML 和 CSS，以便我们重现您的问题并为您提供可行的解决方案。
现在应该都到了，谢谢！
您正在使用一个模板引擎来处理诸如打开模式之类的事情，因此我们还需要一些关于这方面的信息。从图像中删除类只需要img.removeClass("ClassToBeRemoved");，然后再调用$("#holdImage").append(img);。
@SaschaM78 是的，我正在使用 UIKit 2 作为模式，因此它内置了一个关闭按钮，单击对话框外部将关闭它。我只想附加图像来触发相同的操作，但不要在页面会话的其余部分隐藏它

标签： javascript jquery

【解决方案1】：

主要问题似乎是您使用 Jquery 的 hide() 消息（将在元素上设置 display:none;）隐藏整个模态，而不是调用模态的 hide() 消息。这在 Git 存储库中也提到过，可以看到 here。

解决方案是调用正确的hide 方法，如下所示：

var modal = UIkit.modal("#image-modal");
modal.hide();

而不是

$('#image-modal').hide();

关于另一个问题：在将其添加到#holdImage 占位符之前删除附加了点击处理程序的类：

var img = $(this).closest(".getImage").children("img").clone(true);
img.removeClass("FillInClassNameHere");
$("#holdImage").html('');
$("#holdImage").append(img);

由于我没有它的类名，您需要在代码中使用正确的类名更改 FillInClassNameHere。

【讨论】：