Patrick McDermott Patrick McDermott - 7 days ago 6
HTML Question

Issue with document on 'load' event listener

First issue

My script runs fine when it listens for a

click
event on the element with the id
share
. Instead of a
click
event, I want the script to fire up on
$(document).on(load)
event and get rid of the
share
button. But I have tried it and it isn't working. Any idea why it isn't firing up the modal script?

Second issue

The modal window should close when the user clicks the close button, but it doesn't. I have added
console.log
to all functions and they are fired up every time I click close which shouldn't happen. Any idea why it isn't closing?



$(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);
}
};
}());

.modal-window {
position: absolute;
z-index: 10000;
background: #fff;
padding: 1.5em;
clear: both;
overflow: hidden;
}

.modal-content {
border: 0;
}

#share span {
cursor: pointer;
}

<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>




Answer

Your first issue is that you have a document.load event handler being registered inside of a document.ready function that is self-invoking!

// 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          
    });
});