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

RSS Icon Subscribe to comments

You need to login to post a comment.