Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Popup box that won't close

    I'm using a script that I found on this page
    http://javascript.internet.com/navig...popup-box.html
    to make an overlaying popup window appear.
    It works great but you can't close it.

    Can anyone help me with how to add a something to make the window close? I have a little graphic of an "x" that I want to be able to click on and close the overlay window.

    PS I am a novice to JavaScript. I need very very clear instructions.

    Thank you so much!!!
    Last edited by glowingnova; 01-20-2009 at 03:47 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Add this to your pop-up page:-

    <img src = "yourXthing.gif" onclick = "window.close()">


    Quizmaster: Which English king succeeded Henry VIII?
    Contestant: Henry VII.
    Last edited by Philip M; 01-20-2009 at 04:34 PM.

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Modified show_hide_box function (additions in red):
    Code:
    function show_hide_box(an, width, height, borderStyle) {
      var href = an.href;
      var boxdiv = document.getElementById(href);
    
      if (boxdiv != null) {
        if (boxdiv.style.display=='none') {
          move_box(an, boxdiv);
          boxdiv.style.display='block';
        } else
          boxdiv.style.display='none';
        return false;
      }
    
      boxdiv = document.createElement('div');
      boxdiv.setAttribute('id', href);
      boxdiv.style.display = 'block';
      boxdiv.style.position = 'absolute';
      boxdiv.style.width = width + 'px';
      boxdiv.style.height = height + 'px';
      boxdiv.style.border = borderStyle;
      boxdiv.style.backgroundColor = '#fff';
    
      var close_btn = document.createElement("div");
      close_btn.className = "box_close_btn";
      close_btn.pid = href;
      close_btn.onclick = function()
      	{
      	show_hide_box({href:this.pid});
      	}
      boxdiv.appendChild(close_btn);
    
      var contents = document.createElement('iframe');
      contents.scrolling = 'no';
      contents.frameBorder = '0';
      contents.style.width = width + 'px';
      contents.style.height = height + 'px';
      contents.src = href;
    
      boxdiv.appendChild(contents);
      document.body.appendChild(boxdiv);
      move_box(an, boxdiv);
    
      return false;
    }
    Use CSS to assign your close button image:
    Code:
    <style type="text/css">
    .box_close_btn
    {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    background: #ff0000; /*Put image here.*/
    }
    </style>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    glowingnova (01-28-2009)

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Add this to your pop-up page:-

    <img src = "yourXthing.gif" onclick = "window.close()">


    Quizmaster: Which English king succeeded Henry VIII?
    Contestant: Henry VII.
    Thank you, but it only works if I open up the html page with the close button directly, not when it opens as an overlay box on my original page.

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    6
    Thanked 0 Times in 0 Posts
    itsallkizza, Thank you so, so very much. This code change works perfectly. Much appreciated.


  •  

    Posting Permissions

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