0

I cant get this code to work. It's supposed to be a custom dialog box. When a certain event transpires, the div pops up with an animation like it's moving towards you from a distance. The div has a clickable link that is supposed to trigger the removal of the box when clicked.

It works fine for one iteration, but when I attempt to trigger it again the whole thing falls apart in a horrendous way. The console doesn't issue any warnings or errors, but the browser freezes then crashes.

Any help would be appreciated. 

function modalBoxOpen(left, top, width, height, string, element){

var x = $('<div></div>').prependTo(element);

x.attr("id", "pop_up_div");

x.css("position", "absolute");

x.css("border-color", "black");

x.css("border-style", "solid");

x.css("background-color", "rgb(204, 204, 204)" );

x.css("padding", 0 + "%");

x.css("z-index", 10);

var y = $('<div>' + string + '</div>').prependTo(x);

y.attr("id", "inner_pop_up_div");

y.css("text-align", "center");

y.css("font-family", "arial");

y.css("position", "absolute");

y.css("margin", "1%");

y.css("width", "98%");

y.css("height", "93%"); y.css("background-color", "red");

var l = left + .5*width; 

var t = top + .5*height;

x.css("left", l + "px");

x.css("top", t + "px");

x.css("width", 2*(left + .5*width - l) + "px"); 

x.css("height", 2*(top + .5*height - t) + "px");

y.css("font-size", .0413*2*(left + .5*width - l) + "px");

$('<div style = "background-color: black; border-radius: 10px; padding                    

:   1%; margin-top: 1%; margin-left: 43%; margin-right: 43%">' +

'<a class = "link" id = "ok_button" href = "javascript:;"> OK </a>

</div>').appendTo(y);



okButtonClick = function(e){ 

  e.stopPropagation();     

  removeElement('pop_up_div');

  $(".input_cover").css("display", "none");

  bindHandlers();

  if ( $("#language_list_container").is(":visible") )

  {$("#language_clickable").click();}

  }

  $("#ok_button").bind("click", okButtonClick);


  var count = 0;

  timer = setInterval(open, 40);

  function open(){

  if ( count > 4 ) { 

     clearInterval(timer);

     bindHandlers();

     return;

   }

   l -= .1*width;

   t -= .1*height;

   x.css("left", l + "px");

   x.css("top", t + "px");

   x.css("width", 2*(left + .5*width - l) + "px"); 

   x.css("height", 2*(top + .5*height - t) + "px");

   x.css("border-radius", 2*(count+1) + "px");

   y.css("font-size", .0413*2*(left + .5*width - l) + "px");

   count++;

   }

   }

   function removeElement(id) {
   return          

   (elem=document.getElementById(id)).parentNode.removeChild(elem);
   }

0 Answers0