Posted By

mejamiewilson on 08/01/11


Tagged

jquery dialog overlay modal


Versions (?)

jQuery Modal Overlay removed from the Dialog


 / Published in: JavaScript
 

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.

  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  

You need to login to post a comment.