Javascript 保持模态隐藏

Question

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

点击按钮打开模式，模式包含一个搜索栏，用图像填充内容。单击图像时，它会被克隆并附加到另一个 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 存储库中也提到了这一点，可以看出 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。