Creating a modal window

This site is best viewed in a modern browser with JavaScript enabled.

mcco

Hello,

I have code that I am using to create a modal window. The way I was taught the code used a button to open the modal window. How would I modify the code to have it open when clicking a link? Here is the code:

<body>
    <!-- Script 9.8 - modal.html -->
    <div><p>Some Text</p></div>
    <input type="button" value="Show Window" id="openModal">
    <div id="modal">
        <div id="modalMask"></div>
        <div id="modalContent"><p>This is modal content.</p> <input type="button" id="closeModal" value="Close"></div>
    </div>
    <div><p>Some Text</p></div>
    <script src="js/modal.js"></script>
</body>

and here is the javascript:

// Function called to open the window:
function openModal() {
    'use strict';

// Add a click handler to the close modal button:
document.getElementById('closeModal').onclick = closeModal;

// Make the modal DIV visible:
document.getElementById('modal').style.display = 'inline-block';

// Remove the click handler on the open modal button:
document.getElementById('openModal').onclick = null;

} // End of openModal() function.

// Function called to close the window:
function closeModal() {
    'use strict';

// Add a click handler to the open modal button:
document.getElementById('openModal').onclick = openModal;

// Make the modal DIV invisible:
document.getElementById('modal').style.display = 'none';

// Remove the click handler on the close modal button:
document.getElementById('closeModal').onclick = null;

} // End of closeModal() function.

// Establish functionality on window load:
window.onload = function() {
    'use strict';

// Add a click handler to the open modal button:
document.getElementById('openModal').onclick = openModal;

};

Here is the CSS:

#modal {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
}

#modalMask {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    background-color: #eee;
    z-index: 1000;
    opacity: 0.9;
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
}

#modalContent {
    position: relative;
    width:300px;
    margin: 15px auto;
    padding:15px;
    background-color: #fff;
    border:1px solid #000;
    text-align:center;
    z-index: 9999;
}

codersyard

Instead of <input type="button"/> you may try <span class="mylink" id="openModal">Click Me</span>

You may have to create CSS class called 'mylink' to bring an link effect. I would have an sample code for you.

.mylink{
color:#000000;
font-size:11px;
cursor:pointer;
font-family:Tahoma;
text-decoration:none;
}

.mylink:hover{
text-decoration:underline;
}

Same goes for 'closeModal'.

Sup3rkirby

If I understand what you are asking (to have a link open the modal window instead of a button) then all you need is this:

<a id="openModal" href="javascript: void(0);" onclick="">Show Window</a>

Neither button had an [FONT=Courier New]onclick[/FONT] event initially in your code so I assumed the javascript sets this. If not then you would simply add '[FONT=Courier New]openModal()[/FONT]' to the [FONT=Courier New]onclick[/FONT] event in the code above. Everything else should function as usual.

mavigozler

You want to re-style a button so that it looks more like an anchor (link) element than a button?

If your button has the id attribute with value set to mybutton:

#mybutton { background:none;border:none;color:#rrggbb }

All you are doing is making your button element look like a link, rather than actually using an anchor element. Alternative, you can use an anchor element with an onclick event handler defined as attribute.

mcco

Sup3rkirby;1234913 wrote:
If I understand what you are asking (to have a link open the modal window instead of a button) then all you need is this:
<a id="openModal" href="javascript: void(0);" onclick="">Show Window</a>
Neither button had an [FONT=Courier New]onclick[/FONT] event initially in your code so I assumed the javascript sets this. If not then you would simply add '[FONT=Courier New]openModal()[/FONT]' to the [FONT=Courier New]onclick[/FONT] event in the code above. Everything else should function as usual.

Thanks for your response but I am having one other issue. I have a dropdown list that has the links that are going to open the modal windows. As I have it coded, the modal Mask is only masking the menu area and not the entire page. Also, when I hover off of the menu to the location of the modal window it disappears (closes) without me clicking on anything.

mcco

I am trying to use SimpleModal to create the modal windows on my site. Please everyone forget the previous posts as I have scrapped that code. I have not learned Javascript or Jquery yet so this is so confusing to me. I am a php guy and cant seem to figure out what is going on with this code. It says that it is a simple plugin that creates a modal window. First off, where do I put this code:

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"width":600});
      SM.addButton("Action button", "btn primary", function(){
          this.hide();
      });
      SM.addButton("Cancel", "btn");
      SM.show({
        "model":"modal-ajax",
        "title":"Title",
        "param":{
          "url":"file-content.php",
          "onRequestComplete": function(){ /* Action on request complete */ }
        }
      });
});

next is says to use this link:

<a id="myElement" href="javascript;">Open Modal</a>

When I try to do this it says that the url /javascript does not exist on this server. So what am I doing wrong? Does the javascript go in the head of the page its being called or right before the link that is being clicked? I am getting frusterated as I have coded my entire forum with php, html, and css and I would like to implement some modal windows for certain functions such as registration, forgoten passwords and such. If someone could please help me out that would save me so much time. If anyone is familiar with http://simplemodal.plasm.it/ that is where I got the code that I am using.

codersyard

You may check out more simpler modal from 'JS_Examples.zip' @ http://www.codersyard.com/dashboard/ebooks.htmlCheck for 'Chapter-8'