www.webdeveloper.com
Results 1 to 7 of 7

Thread: Creating a modal window

  1. #1
    Join Date
    Feb 2012
    Posts
    102

    Question Creating a modal window

    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 {
        
    displaynone;
        
    positionabsolute;
        
    left0px;
        
    top0px;
        
    width:100%;
        
    height:100%;
    }

    #modalMask {
        
    positionabsolute;
        
    left0px;
        
    top0px;
        
    width:100%;
        
    height:100%;
        
    background-color#eee;
        
    z-index1000;
        
    opacity0.9;
        
    filter:alpha(opacity=90);
        -
    moz-opacity0.9;
    }

    #modalContent {
        
    positionrelative;
        
    width:300px;
        
    margin15px auto;
        
    padding:15px;
        
    background-color#fff;
        
    border:1px solid #000;
        
    text-align:center;
        
    z-index9999;


  2. #2
    Join Date
    Nov 2012
    Location
    Bangalore
    Posts
    5
    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;
    cursorointer;
    font-family:Tahoma;
    text-decoration:none;
    }

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

    Same goes for 'closeModal'.

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    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.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  4. #4
    Join Date
    Jun 2009
    Location
    Miami
    Posts
    118
    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.
    Last edited by mavigozler; 11-16-2012 at 11:42 AM.

  5. #5
    Join Date
    Feb 2012
    Posts
    102
    Quote Originally Posted by Sup3rkirby View Post
    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.

  6. #6
    Join Date
    Feb 2012
    Posts
    102

    Angry

    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.

  7. #7
    Join Date
    Nov 2012
    Location
    Bangalore
    Posts
    5
    You may check out more simpler modal from 'JS_Examples.zip' @ http://www.codersyard.com/dashboard/ebooks.htmlCheck for 'Chapter-8'

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles