代码之家  ›  专栏  ›  技术社区  ›  Geoff_S

Javascript保持模式隐藏

  •  1
  • Geoff_S  · 技术社区  · 7 年前

    一个按钮点击打开模态,模态包含一个搜索栏,用图像填充内容。当单击一个图像时,它被克隆并附加到另一个div中(在主页上的modal之外),并且modal被关闭。

    另外,一旦图像附加到一个新的div,如果我单击它,它就会消失。有没有办法只附加图片源而不附加class标记,这样在新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>
    
    0 回复  |  直到 7 年前
        1
  •  1
  •   SaschaM78 Maxx    7 年前

    主要的问题似乎是使用Jquery的 hide() 消息(将设置 display:none; 而不是调用模态的 隐藏() here .

    解决办法是打电话给合适的 hide 方法如下:

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

    而不是

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

    关于另一个问题:在将click处理程序添加到 #holdImage

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

    因为我没有它的类名,所以您需要更改 FillInClassNameHere