Advanced Search

jQuery Modal Overlay removed from the Dialog

/ Published in: JavaScript
Save to your folder(s)
We use our own dialog code, but the jQuery method of creating an overlay works well, so this is taken from the jQuery UI code and simplified.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. MyApp.Overlay = MyApp.Overlay || {
  2.     create: function () {
  3.  
  4.         $(window).bind("resize.dialog-overlay", MyApp.Overlay.resize)
  5.         var c = $("<div></div>").addClass("ui-widget-overlay").appendTo(document.body).css({
  6.             width: MyApp.Window.width(),
  7.             height: MyApp.Window.height()
  8.         });
  9.         return c
  10.     },
  11.     destroy: function () {
  12.         $([document, window]).unbind(".dialog-overlay")
  13.         $(".ui-widget-overlay").remove();
  14.     },
  15.     resize: function () {
  16.         var c = $(".ui-widget-overlay");
  17.         c.css({
  18.             width: 0,
  19.             height: 0
  20.         }).css({
  21.             width: MyApp.Window.width(),
  22.             height: MyApp.Window.height()
  23.         })
  24.     }
  25. };
  26.  
  27. MyApp.Window = MyApp.Window || {
  28.  
  29.     height: function () {
  30.         var d, c;
  31.         if ($.browser.msie && $.browser.version < 7) {
  32.             d = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  33.             c = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
  34.             if (d < c) {
  35.                 return $(window).height() + "px"
  36.             } else {
  37.                 return d + "px"
  38.             }
  39.         } else {
  40.             return $(document).height() + "px"
  41.         }
  42.     },
  43.     width: function () {
  44.         var c, d;
  45.         if ($.browser.msie && $.browser.version < 7) {
  46.             c = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
  47.             d = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
  48.             if (c < d) {
  49.                 return $(window).width() + "px"
  50.             } else {
  51.                 return c + "px"
  52.             }
  53.         } else {
  54.             return $(document).width() + "px"
  55.         }
  56.     }
  57.  
  58. }

Report this snippet


Comments

You need to login to view comments.