www.webdeveloper.com
Results 1 to 7 of 7

Thread: Close a pop up box automatically

  1. #1
    Join Date
    Jun 2014
    Posts
    12

    Close a pop up box automatically

    Hello,

    I made a pop up box using "onmouseover" event, which opens when my cursor moves on it and I want it to close automatically(preferably using "onmouseout" event ) when cursor moves away from it but I'm not able to achieve it. Please help.

    Thanks

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    please provide the code that you use to open the box

  3. #3
    Join Date
    Jun 2014
    Posts
    12
    Here's the code:
    <p><a onmouseover="show(this,'this is my message#1')" href="http://www.google.com">link1: go to google</a></p>

    function show(obj,msg){

    messageBox.style.top=obj.offsetTop

    messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5

    contents.innerHTML=msg+"<p>"+obj.href

    messageBox.style.display="block"

    }

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    those inline event handlers are pretty retro, but if you want to go that way you could do
    Code:
    onmouseout="messageBox.style.display='none'"

  5. #5
    Join Date
    Jun 2014
    Posts
    12

    Thank you for the reply. If this is the old way then which other way do you suggest.

    Thank you for the reply. If this is the retro way then which other way do you suggest.

    Quote Originally Posted by xelawho View Post
    those inline event handlers are pretty retro, but if you want to go that way you could do
    Code:
    onmouseout="messageBox.style.display='none'"

  6. #6
    Join Date
    Nov 2010
    Posts
    1,085
    I guess unless you were working as a team on a huge project with lots of external scripts you would do something like this:

    Code:
    <head>
    
    <style>
    #ms{
    height:200px;
    width:200px;
    border:solid;
    display:none;
    }
    </style>
    </head>
    <body>
    <a id="googlelink" href="http://www.google.com">link1: go to google</a><br>
    <a id="yahoolink" href="http://www.yahoo.com">link2: go to yahoo</a>
    <div id="ms">
    <span id="cont"></span>
    </div>
    <script>
    var messageBox=document.getElementById("ms");
    var contents=document.getElementById("cont");
    
    var as = document.getElementsByTagName("a");
    
    for(var i = 0; i<as.length; i++){
    as[i].onmouseover=function () {
    var msgs={
    "googlelink":"this is the google message",
    "yahoolink":"this is the yahoo message"
    }
    var obj=this;
    var msg = msgs[obj.id];
    messageBox.style.top=obj.offsetTop;
    messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5;
    contents.innerHTML=msg+"<p>"+obj.href+"</p>";
    messageBox.style.display="block";
    }
    
    as[i].onmouseout=function () {
    messageBox.style.display='none';
    }
    
    }
    </script>
    </body>

  7. #7
    Join Date
    Jun 2014
    Posts
    12
    Thank you . It solves my query.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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