Jquery: Create a popup window when the mouse pointer enters and leaves the elements

Question

I would like to create a popup window in the middle of the web browser when the mouse pointer enters and leaves the elements. The pop up window shows an image that I provide.

How should I implement this in Jquery? Or is there any good plugin to do it?

Thanks

lots of tooltip and modal plugins for this, do some searching in google. Questions like these are off topic here — charlietfl, Feb 23 '15 at 17:34

score 0 · Answer 1 · answered Feb 23 '15 at 17:26

0

Try jQuery UI dialog box.

DEMO

answered Feb 23 '15 at 17:26

hsuk

6,770
13
50
80

plunntic iam · Answer 2 · 2015-02-23T17:36:07.390

That's quite easy, you can do it like that:

$('.hovered_element').mouseenter(function() {
  // you can use some plugin here, or just a simple .show()
  $('.popup_element').show();

  //if you want popup to fade in
  //$('.popup_element').fadein(600);
});
$('.hovered_element').mouseleave(function() {
  // again: any js plugin method, or just .hide()
  $('.popup_element').hide();

  //if you want popup to fade out
  //$('.popup_element').fadeout(600); 
});

Of course you need to style your .popup_element so it shows up in the center, or anywhere you like.

score 0 · Answer 3 · edited May 23 '17 at 12:22

Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog() capability (they call it a "widget"). Here's how it works:

(1) Include both jQuery and the jQueryUI libraries in your <head></head> tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

(2) Create an empty div in your HTML, and initialize it as a dialog:

HTML:

<div id="myDlg"></div>

jquery:

$('#myDlg').dialog({
    autoOpen:false,
    modal:true,
    width: 500,
    height: 'auto'
});

(3) Then, when you are ready to display the dialog, insert new data into the myDlg div just before opening the dialog:

$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');

Note that you can put any HTML in the html() method, including an image.

The above code allows you to change the content of the dialog and use the re-same dialog DIV each time.

Here's what the working example would look like:

jsFiddle Demo

HTML:

<div id="myDlg"></div>
<div id="questiona" class="allques">
    <div class="question">What is 2 + 2?</div>
    <div class="answer">4</div>
</div>
<div id="questionb" class="allques">
    <div class="question">What is the 12th Imam?</div>
    <div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>

jQuery:

var que,ans;

$('#myDlg').dialog({
    autoOpen:false,
    modal:true,
    width: 500,
    height: 'auto',
    buttons: {
        "See Answer": function(){
            $('#myDlg').html(ans);
            $('.ui-dialog-buttonset').next('button').hide();
        },
        "Close": function(){
            $('#myDlg').html('').dialog('close');
        }
    }
});

$('.allques').hover(
    function(){
        //hover-IN
        que = $(this).find('.question').html();
        ans = $(this).find('.answer').html();
        $('#myDlg').html(que).dialog('open');
    },
    function(){
        //hover-OUT -- do nothing
    }