Shadow popup box disappear when pointer of the mouse button try to close the popup

Question

Please excuse my as I am not very experienced with using javascript. I have wordpress website and I would like to find way and help me to create shadow popup box with close button and when visitor with pointer of the mouse try to click on close button X before to click shadow popup box to to disappear/close once. However, I would also like the popup not show on the same visitor more than two times. Shadow popup box to show once or twice time per day. Cookie time to be removed after 24h automatically and the same visitor to see the popup again after 24h. I hope someone can help me.

Thank you.

post some code of what you tried ? and you are not tried yet just look into solution of another one http://stackoverflow.com/questions/823281/how-to-create-a-modal-popup-using-javascript-and-css — Vignesh Pichamani, Dec 18 '14 at 14:18
@Fresher Yes im not tried yet just looking for solution i find some example on this site but on that site is few examples of popups and one of them is with timer.. I am lookin when visitor try close the popup on X before to click popup to disappear/close (http://dinbror.dk/bpopup) Thank you — Aleksandar Ristovski, Dec 18 '14 at 14:45
then why don't you use that plugin http://dinbror.dk/bpopup/ ? — Vignesh Pichamani, Dec 18 '14 at 14:47
@Fresher I will use if im able to find way how to set and make it box disappear when pointer of the mouse try to close the popup..I need box when someone try to close the box when pointer come to X(close button) box to disappear. Let me know if you can help me and I will be grateful for your help. — Aleksandar Ristovski, Dec 18 '14 at 14:54

Vignesh Pichamani · Answer 1 · 2014-12-18T15:16:06.113

0

Check it out simple popup with close and open

<div class="cover"></div>
<div class="popup">
    <button class="close">x</button>
</div>
<button class="open">click me</button>

and jquery

$(".open").click(function () {
    $(".popup").fadeIn(500);
    $(".cover").fadeTo(500, 0.5);
});

$(".close").click(function () {
    $(".popup").fadeOut(500);
    $(".cover").fadeOut(500);
});

CSS

.popup {
    position:fixed;
    border:solid 1px black;
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    margin:-100px 0 0 -100px;
    display:none;
    background-color:white;
}
.cover {
    background-color:black;
    width:100%;
    height:100%;
    display:none;
    position:fixed;
}

Working example http://jsfiddle.net/ayx90k5c/

Edited Ans http://jsfiddle.net/ayx90k5c/7/

Thanks.

edited Dec 18 '14 at 15:16

answered Dec 18 '14 at 15:02

Vignesh Pichamani

7,950
22
77
115

Yes @Fresher that is the box, but in this situation I need to close myself. So in my issue I want when someone will go with mouse arrow X box to disappear/close without pressing X. Thank you – Aleksandar Ristovski Dec 18 '14 at 15:11
check updated fiddle it will open on page load and close after 5 sec – Vignesh Pichamani Dec 18 '14 at 15:16
Thank you @fresher I hope i will be able to use this source code. I found popup box to close after XX seconds but I need code when mouse comes to X (close button) popup to turn off automatically without pressing the close X button, not timed. I really thank you for your assistance and help, and apologize for your time. Thank you. – Aleksandar Ristovski Dec 18 '14 at 15:29
That's good, If you think this answer is helpful then accept an answer if you feel comfortable http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Vignesh Pichamani Dec 18 '14 at 18:36

Shadow popup box disappear when pointer of the mouse button try to close the popup

1 Answers1