Creating a modal window

**mcco** · 11-16-2012, 09:12 AM

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:

PHP 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:

PHP Code:


// 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:

PHP Code:


#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** · 11-16-2012, 10:16 AM

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

ointer;
font-family:Tahoma;
text-decoration:none;
}

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

Same goes for 'closeModal'.

**Sup3rkirby** · 11-16-2012, 10:56 AM

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:

HTML Code:

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

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

**mavigozler** · 11-16-2012, 11:08 AM

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** · 11-16-2012, 03:12 PM

Originally Posted by 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:

HTML Code:

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

Neither button had an onclick event initially in your code so I assumed the javascript sets this. If not then you would simply add 'openModal()' to the onclick 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** · 11-19-2012, 09:11 AM

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:

HTML 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:

HTML Code:

<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** · 11-19-2012, 08:37 PM

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

Thread: Creating a modal window

Thread Tools

Display

Creating a modal window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions