How to Make a Simple Modal Window

Create a Simple modal popup

It surely IS possible without plugins, but that might turn out as serious plumbing.

I've used 'home-made' modal windows implementation in pure javascript myself.

Trust me - it's not a good idea. Even with jQuery (do not confuse with jQuery UI).

I would recommend you 'SimpleModal' plugin by Eric Martin (he is on StackOverflow too and has at least tried to answer every question that's related with his product).

I like it's API and it works like a charm.

html Modal popup

Here's a plain-JavaScript example:

var modal = document.getElementById('modal');var shade = document.getElementById('shade');document.getElementById('start').onclick = function() {  modal.style.display = shade.style.display = 'block';};document.getElementById('close').onclick = function() {  modal.style.display = shade.style.display = 'none';};
// This code is a workaround for IE6's lack of support for the// position: fixed style.//if (!('maxHeight' in document.body.style)) {  function modalsize() {    var top = document.documentElement.scrollTop;    var winsize = document.documentElement.offsetHeight;    var docsize = document.documentElement.scrollHeight;    shade.style.height = Math.max(winsize, docsize) + 'px';    modal.style.top = top + Math.floor(winsize / 3) + 'px';  };  modal.style.position = shade.style.position = 'absolute';  window.onscroll = window.onresize = modalsize;  modalsize();}

body {  margin: 0;}
#shade,#modal {  display: none;}
#shade {  position: fixed;  z-index: 100;  top: 0;  left: 0;  width: 100%;  height: 100%;}
#modal {  position: fixed;  z-index: 101;  top: 33%;  left: 25%;  width: 50%;}
#shade {  background: silver;  opacity: 0.5;  filter: alpha(opacity=50);}

<div id="shade"></div><div id="modal">  <textarea rows="5" cols="25"></textarea>  <button id="close">Close</button></div>
<p>  <button id="start">Start</button></p>

Create simple CSS modal window

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

<div class="box">
    <a class="button" href="#popup1">Open</a>
</div>

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Here i am</h2>
        <a class="close" href="#">×</a>
    </div>
</div>

Create a simple modal pop-up window in XSLT

Solution:

Since the Members are added to the stylesheet on the fly, we have to give <div> inline_DTRXMLInfo a unique ID which can be achived by appending MemberNumber to the <div> ID.

Code:

 <xsl:attribute name="href">#inline_DTRXMLInfo_<xsl:value-of select="@MemberNumber"/></xsl:attribute>

<div id="inline_DTRXMLInfo_{$MemberNumber}" class="fancysize">
    <xsl:call-template name="DTRXMLInfo">

      <xsl:with-param name="Date Of Birth" select="DateofBirth"></xsl:with-param>

    </xsl:call-template>
  </div>

Using SimpleModal JS to create a modal to fill the browser window.

Just call modal with explicit css params passed:

$('#basicModalContent').modal({containerCss: {left: 0, top: 0, width: '100%', height: '100%'}});

Simple modal div in jQuery?

EDIT: This is obviously outdated. So please refer to Andrew Odri post below.

I don't know how good you are in CSS and JavaScript, but your request shouldn't be that hard to do yourself.

body, html { margin:0; padding:0; }
#modalTabelGray
{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;

    text-align:center;
    vertical-align:middle;
}

#modalDiv
{
    position:absolute;
    z-index:101;
}

I haven't tested the code, might not work, but you'll get the idea.

How to open a new modal window to close the current use of simplemodal

If you check the page http://www.ericmmartin.com/projects/simplemodal/,

Look for Callbacks

There is onClose callback which you can use to close and open new modal when old one closed,

Created following example

Both Modals HTML

//Modal One
<a href="#" class="demo button">Demo</a> 
<div id="basic-modal-content">      
<h3>Basic Modal Dialog</h3>
    <p>For this demo, SimpleModal is using this "hidden" data for its content.
    You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
    <p>
        <button class="simplemodal-close">Close</button> <span>(or press ESC)</span>
    </p>
</div>
//Modal Two 
<div id="newmodal">     
<h3>New Modal Dialog</h3>

    <p>Hey I'm new modal and open when old one is closed, Hey I'm new modal and open when old one is closed,
    Hey I'm new modal and open when old one is closed, Hey I'm new modal and open when old one is closed,
    Hey I'm new modal and open when old one is closed, Hey I'm new modal and open when old one is closed</p>
</div>

JS Code

$(document).ready(function(){
    $('.demo').click(function (e) { //Open First Modal with Click Function
        e.preventDefault();
        $('#basic-modal-content').modal({ //First Modal Show
            onClose: function (dialog) { //On Close Function
                dialog.data.fadeOut('slow', function () {
                    dialog.overlay.fadeOut('slow', function () {
                        $.modal.close(); // must call this to close old modal and clear all data!
                        $('#newmodal').modal(); //Open New Modal
                    });
                });
            }
        });
    });
});

Working Fiddle Example