Question

第一期

我的脚本在标识click的元素上侦听share事件时运行正常。我想要脚本在click事件上启动并取消$(document).on(load)按钮，而不是share事件。但是我已经尝试过它并且它不起作用。知道为什么它不会启动模态脚本吗？

第二期

当用户点击关闭按钮时，模态窗口应该关闭，但它不会。我已将console.log添加到所有函数中，每次单击“关闭”时它们都会被激活，这不应该发生。知道它为什么不关闭吗？

＆＃13;

$(function(){
  var $content = $('#welcome-modal').detach();

    $(document).on('load', function() {
    modal.open({
        content: $content,
        width: 500          
    });
});
}());

 var modal = (function() {
 var $window = $(window);                                                           //store the window object
 var $modal = $('<div class="modal-window">');                                          //create markup for modal
 var $content = $('<div class="modal-content">');
 var $close = $('<button role="button" class="modal-close">close</button>');

$modal.append($content, $close);                                                //append content and close button

$close.on('click', function(e) {                                                //if user clicks on close button
    e.preventDefault();                                                         //prevent default behaviour
    modal.close();                                                              //close modal

});

return {                                                                        //add code to modal
    center: function() {
        var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2;     //calculate distance from top   
        var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2;      //calculate distance from left

        $modal.css({
            top: top + $window.scrollTop(),                                     //apply css positioning to the modal
            left: left + $window.scrollLeft()
        });
        console.log('center');
    },
    open: function(settings) {

        $content.empty().append(settings.content);
        $modal.css({                                                            //removed height so it's auto
            width: settings.width || 'auto'                 
        }).appendTo('body');

        modal.center();
        $(window).on('resize', modal.center);
        console.log('open');
    },
    close: function() {
        console.log('close');
        $content.empty();                                                       //Remove all child nodes of the set of matched elements from the DOM.
        $modal.detach();
        $(window).off('resize', modal.center);
    }
};
}());

＆＃13;

.modal-window {
position: absolute;
z-index: 10000;
background: #fff;
padding: 1.5em;
clear: both;
overflow: hidden;
}

.modal-content {
border: 0;
}

#share span {
cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="share">
    <span class="fa fa-heart fa-3x"></span>
</div>
<div id="welcome-modal">
    <h4>This is jibber title</h4>
    <p>A load of jibber jabber</p>      
</div>

＆＃13;

Answer 1

您的第一个问题是您在document.load函数内注册了一个document.ready事件处理程序，该函数是自我调用的！

// When you pass a function to JQuery, that function is automatically
// executed when the DOM is ready. No need to self-invoke it.
$(function(){
  var $content = $('#welcome-modal').detach();

    // Since this code is already running when the DOM is ready
    // there is no need to make this code the callback for document.load
    modal.open({
        content: $content,
        width: 500          
    });
});

关于＆＃39;加载＆＃39;的文档问题事件监听器

1 个答案: