Why does this popup add multiple overlay to the DOM tree for no apparent reason?

Question

I am using popup.js to display content inside a popup. However, if I am executing the basic example, this is what I am getting:

What you see here is the popup with some uninteresting content, but you can also see that <div class="popup_cont" ..> has been added several times to the DOM tree. The result is that I have to click (here) 7 times to get rid of the popup. Each click removes one of those overlays..

I have no idea why this is happening. This is how I embed the popup:

<div id="btn-help" class="toy-button">
  <span lang="en">
    <a href="#inline" class="default_popup ignore_hash">HELP</a>
  </span>
</div>

And this is how it gets invoked:

/**
 * Callback to display help window.
 * @private
 * @memberOf module:cpu-controlls_controller
 */
_onHelpButtonClicked = function() {     

    debug('cpu-controlls.controller _onHelpButtonClicked()');
    var options = { content : "hallo.html" };
    $('.default_popup').popup(options);
};

Where the hallo.html is just a .html file with a lot of "Hello World!" messages.

Any idea how I can solve this?

Answer 1

It seems like you initialize the popup plugin every time the user clicks on the button, so the first time it will work okay, but with every next click you will have more and more popups to close. Put the initialization in the document.ready() function, and out of the click handler.

Answer 2

There are two different ways to popup the window (in any case I use always full url path):

/*-------------------------------

 POPUP.JS

 Simple Popup plugin for jQuery

 @author Todd Francis
 @version 2.2.3

-------------------------------*/

;(function(b,t){b.fn.popup=function(h){var q=this.selector,m=new b.Popup(h);b(document).on("click.popup",q,function(n){var k=h&&h.content?h.content:b(this).attr("href");n.preventDefault();m.open(k,void 0,this)});return this.each(function(){b(this).data("popup",m)})};b.Popup=function(h){function q(a){var d;b.each(a,function(a,c){if(c)return d=c,!1});return d}function m(a){return"function"===typeof a?"function":a instanceof b?"jQuery":"#"===a.substr(0,1)||"."===a.substr(0,1)?"inline":-1!==b.inArray(a.substr(a.length-
3),u)?"image":"http"===a.substr(0,4)?"external":"ajax"}function n(c){r&&r.fadeOut("fast",function(){b(this).remove()});var d=!0;void 0===f&&(d=!1,f=b('<div class="'+a.o.containerClass+'">'),p=b(a.o.markup).appendTo(f),b(a.o.closeContent).one("click",function(){a.close()}).appendTo(f),b(t).resize(a.center),f.appendTo(b("body")).css("opacity",0));var e=b("."+a.o.contentClass,f);a.width?e.css("width",a.width,10):e.css("width","");a.height?e.css("height",a.height,10):e.css("height","");p.hasClass(a.o.contentClass)?
p.html(c):p.find("."+a.o.contentClass).html(c);d?a.o.replaced.call(a,f,g):a.o.show.call(a,f,g)}function k(a,d){var b=(new RegExp("[?&]"+a+"=([^&]*)")).exec(d);return b&&decodeURIComponent(b[1].replace(/\+/g," "))}var a=this,u=["png","jpg","gif"],l,s,g,f,r,p;a.ele=void 0;a.o=b.extend(!0,{},{backClass:"popup_back",backOpacity:.7,containerClass:"popup_cont",closeContent:'<div class="popup_close">&times;</div>',markup:'<div class="popup"><div class="popup_content"/></div>',contentClass:"popup_content",
preloaderContent:'<p class="preloader">Loading</p>',activeClass:"popup_active",hideFlash:!1,speed:200,popupPlaceholderClass:"popup_placeholder",keepInlineChanges:!0,modal:!1,content:null,type:"auto",width:null,height:null,typeParam:"pt",widthParam:"pw",heightParam:"ph",beforeOpen:function(a){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},error:function(){},show:function(a,b){var e=this;e.center();a.animate({opacity:1},e.o.speed,function(){e.o.afterOpen.call(e)})},replaced:function(a,
b){this.center().o.afterOpen.call(this)},hide:function(a,b){void 0!==a&&a.animate({opacity:0},this.o.speed)},types:{inline:function(c,d){var e=b(c);e.addClass(a.o.popupPlaceholderClass);a.o.keepInlineChanges||(s=e.html());d.call(this,e.children())},image:function(c,d){var e=this;b("<img />").one("load",function(){var a=this;setTimeout(function(){d.call(e,a)},0)}).one("error",function(){a.o.error.call(a,c,"image")}).attr("src",c).each(function(){this.complete&&b(this).trigger("load")})},external:function(c,
d){var e=b("<iframe />").attr({src:c,frameborder:0,width:a.width,height:a.height});d.call(this,e)},html:function(a,b){b.call(this,a)},jQuery:function(a,b){b.call(this,a.html())},"function":function(b,d){d.call(this,b.call(a))},ajax:function(c,d){b.ajax({url:c,success:function(a){d.call(this,a)},error:function(b){a.o.error.call(a,c,"ajax")}})}}},h);a.open=function(c,d,e){c=void 0===c||"#"===c?a.o.content:c;if(null===c)return a.o.error.call(a,c,l),!1;void 0!==e&&(a.ele&&a.o.activeClass&&b(a.ele).removeClass(a.o.activeClass),
a.ele=e,a.ele&&a.o.activeClass&&b(a.ele).addClass(a.o.activeClass));if(void 0===g){g=b('<div class="'+a.o.backClass+'"/>').appendTo(b("body")).css("opacity",0).animate({opacity:a.o.backOpacity},a.o.speed);if(!a.o.modal)g.one("click.popup",function(){a.close()});a.o.hideFlash&&b("object, embed").css("visibility","hidden");a.o.preloaderContent&&(r=b(a.o.preloaderContent).appendTo(b("body")))}d=q([d,a.o.type]);l=d="auto"===d?m(c):d;a.width=a.o.width?a.o.width:null;a.height=a.o.height?a.o.height:null;
if(-1===b.inArray(d,["inline","jQuery","function"])){e=k(a.o.typeParam,c);var f=k(a.o.widthParam,c),h=k(a.o.heightParam,c);d=null!==e?e:d;a.width=null!==f?f:a.width;a.height=null!==h?h:a.height}a.o.beforeOpen.call(a,d);a.o.types[d]?a.o.types[d].call(a,c,n):a.o.types.ajax.call(a,c,n)};a.close=function(){a.o.beforeClose.call(a);"inline"===l&&a.o.keepInlineChanges&&(s=b("."+a.o.contentClass).html());void 0!==g&&g.animate({opacity:0},a.o.speed,function(){a.cleanUp()});a.o.hide.call(a,f,g);return a};a.cleanUp=
function(){g.add(f).remove();f=g=void 0;b(t).unbind("resize",a.center);a.o.hideFlash&&b("object, embed").css("visibility","visible");a.ele&&a.o.activeClass&&b(a.ele).removeClass(a.o.activeClass);var c=b("."+a.o.popupPlaceholderClass);"inline"==l&&c.length&&c.html(s).removeClass(a.o.popupPlaceholderClass);l=null;a.o.afterClose.call(a);return a};a.center=function(){f.css(a.getCenter());g.css({height:document.documentElement.clientHeight});return a};a.getCenter=function(){var a=f.children().outerWidth(!0),
b=f.children().outerHeight(!0);return{top:.5*document.documentElement.clientHeight-.5*b,left:.5*document.documentElement.clientWidth-.5*a}}}})(jQuery,window);




$(function () {

  // first method
  $('.default_popup').popup();

  // second method
  $('.default_popup1').click(function(e) {
    e.preventDefault();
    var popup = new $.Popup();
    popup.open('http://stackoverflow.com/');
  });

});

/*-------------------------------

POPUP.CSS

-------------------------------*/

.popup_back {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.popup_cont {
    position: fixed;
    z-index: 102;
}

.preloader {
    z-index: 101;
}

/*---------------------

 EDIT BELOW

*/

.popup_close {
    color: #888;
    cursor: pointer;
    position: absolute;
    padding: 5px;
    right: 5px;
    top: 0;
}

.popup_close:hover {
    color: #111;
}

.popup_back {
    cursor: pointer;
    background-color: #222;
}

div.popup {
    background: #fff;
    padding: 25px;
    box-shadow: 0 3px 10px #222;
}

.preloader {
    left: 50%;
    margin: -10px 0 0 -25px;
    position: fixed;
    top: 50%;
}

<script src="//code.jquery.com/jquery-1.11.3.js"></script>


<div id="btn-help" class="toy-button">
  <span lang="en">
      <a href="http://stackoverflow.com/" class="default_popup ignore_hash">HELP1</a>
  </span>
</div>

<div id="btn-help1" class="toy-button">
  <span lang="en">
<a href="#inlinel" class="default_popup1 ignore_hash">HELP2</a>
  </span>
</div>