Page 1 of 1

Minimalist jQuery Modal Dialog

Posted: Sat Dec 20, 2008 2:43 pm
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.

Re: Minimalist jQuery Modal Dialog

Posted: Sat Dec 20, 2008 8:21 pm
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>

Re: Minimalist jQuery Modal Dialog

Posted: Tue Oct 20, 2009 10:04 am
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?

Re: Minimalist jQuery Modal Dialog

Posted: Thu Oct 22, 2009 10:33 pm
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.

Re: Minimalist jQuery Modal Dialog

Posted: Fri Oct 23, 2009 1:06 am
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... ;)

Re: Minimalist jQuery Modal Dialog

Posted: Thu Oct 29, 2009 1:06 am
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

Re: Minimalist jQuery Modal Dialog

Posted: Fri Oct 30, 2009 7:10 pm
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.

Re: Minimalist jQuery Modal Dialog

Posted: Fri Oct 30, 2009 9:31 pm
by josh
$( 'div' ).setAttr( 'class', 'myClass1' );

or

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

theres also .removeClass() I think