JavaScript保持模态隐藏

Question

我有2个小问题，其中一些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>

Answer 1

主要问题似乎是您使用jQuery的hide()消息（将在元素上设置display:none;），而不是调用模态的hide()消息。在Git存储库中也提到了这一点。

解决方案是调用正确的 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。