Minimalist jQuery Modal Dialog

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Minimalist jQuery Modal Dialog

Post by volomike »

I finally figured out how to make a minimalist jQuery Modal Dialog that works across browser platforms. I'm taking any kind of suggestions for improvement that you want to throw at me. Also know that part of the credit goes to "redsquare" here.

1. First, include your jQuery library, of course.

2. Now include this PHP by saving the following as modal.php and then doing <? require_once('modal.php') ?> in your code. Use it only on the pages where you need it.

Code: Select all

<?php ?>
<script>
var _IE6OrLess = 0; var _PrevHTMLColor = ''; var _PrevBodyColor = '';
function Modal(sHTML) {
    $('<div />').addClass('overlay').appendTo('body').show();
    if (_IE6OrLess) {
        _PrevHTMLColor = $('html').css('background-color');
        _PrevBodyColor = $('body').css('background-color');
        $('html').css('background-color','#444');
        $('body').css('background-color','#FFF');
    }
    $('<div />').html(sHTML).addClass('modal').appendTo('body').fadeIn();
}
 
function CloseModal() {
    $('.modal').fadeOut('normal',function() {
        $('.modal').remove();
        $('.overlay').remove();
        if (_IE6OrLess) {
            $('html').css('background-color',_PrevHTMLColor);
            $('body').css('background-color',_PrevBodyColor);           
        }
    });
}
</script>
<!--[if lte IE 6]>
 
<script>_IE6OrLess = 1;</script>
<![endif]-->
<style>
.overlay {
  border-width: 0;
  margin: 0;
  padding: 0;
  background:black none repeat scroll 0 0;
  display:none;
  height:2500px;
  left:0;
  filter:alpha(opacity=70);
  opacity: 0.70;
  top:0;
  width:100%;
  z-index:50;
  display:none;
  position:fixed;
  -moz-background-clip: -moz-initial; 
  -moz-background-origin: -moz-initial; 
  -moz-background-inline-policy: -moz-initial;    
}
.modal{
  position:absolute;
  left:45%;
  top:25%;
  z-index:51;
  display: none;
}
</style>
<!--[if lte IE 6]>
<style>
.overlay {
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
     filter:alpha(opacity=70);
}
</style>
<![endif]-->
 
3. Now style it in the HTML of your page like the following. Note this is only an example.

Code: Select all

<style>
.modal {
  background: #136bb2;
  color: #FFF;
  padding: 15px;
  border: 3px solid #1789e1;
  border-right: 3px solid #0e548a;
  border-bottom: 3px solid #0e548a;
}
</style>
4. Now, in the HTML of your page where you want to show this, activate it with an event like this:

Code: Select all

<script>
$().ready(function(){ //when page has fully loaded
  $('.confirm').click(function() {
    Modal('This is your modal example.<br /><br /><input type="button" value="Close" onclick="CloseModal();" />');  
    return false;
  });
});
</script>
Therefore, when someone clicks a link or button or widget with a class of confirm, it throws up your modal dialog on a dim overlay, styled the way you want, along with any buttons or whatever that you want. It puts more of the HTML inside the modal under your control, and requires less aggravation to get it going or to learn it.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Minimalist jQuery Modal Dialog

Post by volomike »

Okay, here's an even better version:

Code: Select all

// MicroModal v.2
var _PrevHTMLColor = '';
var _PrevBodyColor = '';
 
jQuery.MicroModal = function(sHTML) {
    var IE6 = 0;
    // if IE6 or prior...
    /*@cc_on
    @if (@_jscript_version <= 5.6)
    IE6 = 1;
    /*@end @*/
    $('<div />').attr('id','overlay').appendTo('body')
    .css('border-width',0)
    .css('margin',0)
    .css('padding',0)
    .css('background','#000 none repeat scroll 0 0')
    .css('display','none')
    .css('height','2500px')
    .css('top',0)
    .css('left',0)
    .css('filter','alpha(opacity=70)')
    .css('opacity','0.70')
    .css('width','100%')
    .css('z-index',50)
    .css('position','fixed')
    .css('-moz-background-clip','-moz-initial')
    .css('-moz-background-origin','-moz-initial')
    .css('-moz-background-inline-policy','-moz-initial')
    .show();
    $('<div />').html(sHTML).attr('id','MicroModal').appendTo('body')
    .css('z-index',51)
    .css('display','none');
    if (IE6) {
        _PrevHTMLColor = $('html').css('background-color');
        _PrevBodyColor = $('body').css('background-color');
        $('html').css('background-color','#444');
        $('body').css('background-color','#FFF');
        $('#overlay')
        .css('position','absolute')
        .css('filter','alpha(opacity=70')
        .css('height', document.documentElement.clientHeight + 'px');
        $('SELECT').each(function() {
            if ($(this).css('display') != 'none') {
                $(this).addClass('mm_hide').hide();
            }
        });
        $('#MicroModal')
        .css('position','absolute')
        .css('left','30%')
        .css('top','25%');
    } else {
        $('#MicroModal')
        .css('position','fixed')
        .css('left','30%')
        .css('top','25%');
    }
    $('#MicroModal').fadeIn('normal');
}
 
jQuery.CloseMicroModal = function() {
    $('#MicroModal').fadeOut('fast',function() {
        $('#MicroModal').remove();
        $('#overlay').remove();
        // if ie6 or prior...
        /*@cc_on
        @if (@_jscript_version <= 5.6)
            $('html').css('background-color',_PrevHTMLColor);
            $('body').css('background-color',_PrevBodyColor);           
            $('.mm_hide').each(function() {
                $(this).removeClass('mm_hide').show();
            });
        /*@end @*/
    });
}
 
Usage:

Code: Select all

<style>
#MicroModal {
  background: #136bb2;
  color: #FFF;
  padding: 15px;
  border: 3px solid #1789e1;
  border-right: 3px solid #0e548a;
  border-bottom: 3px solid #0e548a;
}
</style>
<script>
$().ready(function(){ //when page has fully loaded
  $('.confirm').click(function() {
    $.MicroModal('This is your modal example.<br /><br /><input type="button" value="Close" onclick="$.CloseMicroModal();" />'); 
    return false;
  });
});
</script>
rvrabel
Forum Newbie
Posts: 1
Joined: Tue Oct 20, 2009 10:00 am

Re: Minimalist jQuery Modal Dialog

Post by rvrabel »

Hey there, this has worked great! I've noticed in IE6 though, the positioning of it is weird. It seems to not be centered based on where they are scolled on the page (say they are scrolled down half way, and click something that pops it up), it sets the overlay at the top of the page.

Any fix for this?
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Minimalist jQuery Modal Dialog

Post by volomike »

IE6 is now a 9 year old browser. We're approaching December here soon and so it will become a 10 year old browser. Microsoft hasn't issued security patches for it I think in like 2 years. As far as I know, many worm viruses still circulate the Internet and screw up Internet Information Server websites so that some occasional ones hold malicious IE6 code that drop trojan viruses on PCs that walk right on through IE6. As well, Windows 7 has arrived. So, as you can see, Microsoft is moving on. In fact, if you try and use IE6 on the Microsoft website, you'll find on many pages that Microsoft isn't even worrying about the transparent PNG issue and many pages will generate errors on IE6. So, surfing the web with IE6 has now become a frustrating experience for many people.

Therefore, it's time to cut the cord and go with the technique from ie6update.com.

However, there are other alternatives. Consider for example something called slimbox2.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Minimalist jQuery Modal Dialog

Post by Christopher »

In you first post you put the modal Javascript in a PHP file. I guess you wanted to combine the Javascript and CSS? I put your "MicroModal v.2" in Javascript file called modal.js.

Here is a HTML page that will make it a little easier for people to try this out.

Code: Select all

<html>
<head>
<style>
#MicroModal {
  background: #136bb2;
  color: #FFF;
  padding: 15px;
  border: 3px solid #1789e1;
  border-right: 3px solid #0e548a;
  border-bottom: 3px solid #0e548a;
}
</style>
<script src="jquery.js" language="javascript"></script>
<script src="modal.js" type="text/javascript"></script>
<script>
$().ready(function(){ //when page has fully loaded
  $('.confirm').click(function() {
    $.MicroModal('This is your modal example.<br /><br /><input type="button" value="Close" onclick="$.CloseMicroModal();" />');
    return false;
  });
});
</script>
</head>
<body>
 
<a href="#" class="confirm">This is a modal link</a>
 
</body>
</html>
PS - hate the colors... ;)
(#10850)
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Minimalist jQuery Modal Dialog

Post by josh »

SimpleModal is one that I have used http://www.ericmmartin.com/projects/simplemodal/
I would consider implementing some of the stuff that can do, if not just using that

By the way instead of chaining .css() calls I like to create a class in the stylesheet providing a sort of "high level language" to use to set the element's whole class instead of ad hoc style rules. By applying this refactoring you'd loose 25+ LOC making the function a bit more maintainable and even more minimalist
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Minimalist jQuery Modal Dialog

Post by volomike »

josh wrote:By the way instead of chaining .css() calls I like to create a class in the stylesheet providing a sort of "high level language" to use to set the element's whole class instead of ad hoc style rules. By applying this refactoring you'd loose 25+ LOC making the function a bit more maintainable and even more minimalist
Okay, please do let me see an example. I'm interested in this.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Minimalist jQuery Modal Dialog

Post by josh »

$( 'div' ).setAttr( 'class', 'myClass1' );

or

$("div").addClass("myClass1"); // wont overwrite existing classes it has

theres also .removeClass() I think
Post Reply