Dev Notes

Notes on Development with Microsoft Technologies

jQuery Modal Display Optimization

1 Comment

I have been doing a lot of work with jQuery lately and decided that I would create my own modal popup display. However, I want to look for ways to optimize this code, if there are any. Anyone have any suggestions?

   jQuery.fn.showAlert = function(text, duration, opacity, inSpeed, outSpeed, width) {
       var content = "<div id=\"alert\"><div id=\"boxes\"><div id=\"dialog\" class=\"window\">" + text + "<div id=\"close\">OK</div></div></div><div id=\"mask\" name=\"modal\"></div></div>";
       $(this).append(content);
       var mask = $("#mask");
       mask.css({ 'position': 'absolute',
           'z-index': 9000,
           'background-color': '#000',
           'top': '0px',
           'left': '0px',
          'opacity': 0
      });
  
      var dialogContainer = $("#boxes");
      dialogContainer.css({ 'width': width,
          'height': '250px'
      });
  
      var dialog = $("#dialog");
      dialog.css({
          'position': 'absolute',
          'z-index': 9999,
          'background-color': '#ffffff',
          'top': '0px',
          'left': '0px',
          'padding': '5px',
          'border': 'solid 2px black',
          'width': width
      });
      dialog.hide();
  
      var maskHeight = $(document).height();
      var maskWidth = $(document).width();
  
      var dialogTop = ($(window).height() - dialog.height()) / 2 + $(window).scrollTop() + "px";
      var dialogLeft = ($(window).width() - dialog.width()) / 2 + $(window).scrollLeft() + "px";
  
      dialog.css({ 'top': dialogTop, 'left': dialogLeft });
  
      mask.css({ 'width': maskWidth, 'height': maskHeight });
      mask.fadeTo(inSpeed, opacity);
  
      dialog.fadeIn(inSpeed);
  
      var close = $("#close");
      if (duration < 0) {
          close.css({ 'cursor': 'pointer' }).click(function() {
              var newSpeed = outSpeed / 2;
              dialog.fadeOut(newSpeed, function() {
                  mask.fadeOut(newSpeed, function() {
                      $("#alert").remove();
                  });
              });
          });
      }
      else {
          close.hide();
          window.setTimeout(function() {
              var newSpeed = outSpeed / 2;
              dialog.fadeOut(newSpeed, function() {
                  mask.fadeOut(newSpeed, function() {
                      $("#alert").remove();
                  });
              });
          }, duration);
      }
  }
  
Advertisements

Author: Chris Quick

I have been a developer of web based solutions since early 2001 delivering solutions to a wide array of organizations using ASP, ASP.NET and SharePoint. I was introduced to SharePoint in 2003 when the consulting firm I worked for at the time introduced it into the workplace. I began working with MOSS 2007 as soon as Microsoft released the RTM version in November 2006. The platform was implemented at the organization I worked for in 2007 and went live in March of that year. I was tasked with the administration and ongoing development of the platform. I currently work as a SharePoint Architect with Artis Consulting, developing solutions for a wide variety of business problems. The goal of this blog is to share my discoveries developing solutions with SharePoint. I welcome your comments and feedback to any post -- and I welcome suggestions for future topics.

One thought on “jQuery Modal Display Optimization

  1. Good one keep uploading such type of things will return to read your blog…Web Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s