Now a day’s JQuery’s are used almost in all websites. In today’s tutorial I am going to share a new way to show a pop up message. Everyone is getting bored with typical fade in fade out pop up messages. So let’s make it interesting with a pinch of jquery and css.
In this tutorial we are going to make two javascript functions which will be used to slide in and slide out a div.
[js]
function openOffersDialog() {
$('#overlay').fadeIn('fast', function() {
$('#boxpopup').css('display','block');
$('#boxpopup').animate({'left':'30%'},500);
});
}
function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
[/js]
In the first function we are making a call to a div to fadeIn and in that fade in function we are sliding our popup from right to left.
The next function is used to slide the function from center of the screen to the extreme left side so it appears us to be disappeared. In this function we also set the overlay div to fadeout.
So let’s construct with our HTML part.
[html]
<body onload="openOffersDialog();">
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
</div>
</div>
</div>
</body>
[/html]
This was a small tutorial on sliding a popup without using any JQuery UI and making it different from other popups.
UPDATE: CHECK THE NEW DEMO FOR LOAD THE POPUP ON CLICK. THIS WILL NOT LOAD THE POPUP ON LOAD OF PAGE
niiice job
ReplyDeletejust what I'm looking for
thanks
I really like this, but I'm gonna me using this as a pop out messaging system, so when a page loads I wouldn't like having it pop out until they clicked on the link to open it... Tried to remove but then it completely doesn't work...
ReplyDeleteI tried removing the body onload function, but then it doesn't work correctly..
ReplyDeleteyou just need to remove the body onload function, it will work for sure
ReplyDeleteIt works, but it just goes to the overlay and I can't back out of it... Any ideas on what I can do.. Because I really like this pop up script...
ReplyDeleteDo you have a working live example? So that I can debug it
ReplyDeleteIt's on a game, hitman
ReplyDeletemassacre
.com
Feel free to register and the popup is on the profiles when a user clicks on the Envelope and stack of cash
I am not able to register, it always popups with Sorry, This username is already in use. Can you provide a demo user and pass
ReplyDeleteI took out the <body onload, but then I put it back, but put It works, but it brings the popup out and then closes it, but still works if I click on the links
ReplyDeleteGive me a few minutes to create one for you..
ReplyDeleteUsername: NtechiPassword: demo1
ReplyDeleteOk I found the problem, your left position should be 30% not 100%,
ReplyDeleteplease check this line of code
"left": windowWidth/2-popupWidth/2
No no, All I want is the popup not to pop open when the page loads, only when the user clicks on the link to open the dialog.
ReplyDelete@4751c8a1140ca91ab421a274692f7d06:disqus Ok I found the reason of the fadein popup in your profile page,
ReplyDeleteyou are calling closeDialog() function on body load, remove that.
i am trying to close popup right to left direction but it create problem if any solution?????
ReplyDeleteDo you have any live example? where I can check it and debug it?
ReplyDelete[...] Go take a look at this fun site: jquery-popup [...]
ReplyDelete[...] View Source Related PostsCreate Realistic Knob Control Using jQuery and CSS37 Useful Drag n Drop Shopping Cart Tutorial With jQueryjQuery Row Scroller PluginHow to Create an Online Radio Using jQuery & jPlayerUsing jQuery to Create a Right Click Function to Save Website Logo Posted in jQuery Tagged jQuery, jquery popup, jquery slide popup, popup, popup messages [...]
ReplyDelete[...] Go look at this fun site: ajax [...]
ReplyDeleteHow can i stop the first slide in on page load? so that it only start sliding after clicking the button?
ReplyDeleteJust remove onload attribute from body tag
ReplyDeletechange to
can i make this work on two different links?
ReplyDeleteworking very fine but i want to set cookies, please help me by providing a script which control this pop up appearing. i want, it only appear one time to my visitors per day.
ReplyDeleteIs the overlay problem solved? How do i get the popup to appear only when i click the link? Changed body onload="openOffersDialog();" to just body. is that what you are refering to?
ReplyDeleteif you want to remove from onload, then remove it from body tag
ReplyDeleteGreat Job
ReplyDeleteNot working with IE. :(
ReplyDeletehow to appear a pop after few sec of page load
ReplyDeleteuse window.set timeout function to load it after few secs
ReplyDeleteworks in IE as well, which one you are using?
ReplyDeleteyes you can easily do that
ReplyDeleteyou can set cookies, but it requires external javascript library, instead use PHP cookie and call that JS only if cookie is empty
ReplyDeleteGuys if you want to pop up only with click .. just .... give the inline style="display: none" to the over lay div
ReplyDelete[...] content will slide from the right side of the browser just like this. I’ve managed to find a jQuery code for the effect (which might not be the best one, if I can find a better option.) Hope you don’t mind if I [...]
ReplyDeleteThis is great! Took a bit to get the stop position where I wanted it but it's all good. Thanks!
ReplyDeleteThanks ,but how can i use this popup action with calling single line of code in jquery i.e, your demo page in one domain and calling with jquery function which is in another domain ?
ReplyDeleteSo how can you use this for more than one link on the same page?
ReplyDeletedid u get the answer on how to unload on the page load and load only when u click on the link or button
ReplyDeleteIts very simple just remove the onload function from body tag, this will prevent the popup to load on page load
ReplyDeleteThanks a million
ReplyDeleteHi im having problems with the popup. I have removed the onload from the body so it will only display once the button has been clicked, however it the overlay then blocks everything so you can only click backwards in browser
ReplyDeleteI have used this script in my web project, my problem is that the pop up opacity is transparent and shows everything behind it. How can I fix this ?
ReplyDeleteopacity is used to make transparency. If you don't want then simply remove it
ReplyDeleteI want the pop up only after clicking the link. Even if I remove onload in body tag, that does not work. How do I solve it?
ReplyDeleteThanks to one of the comments. Adding display:none as inline style to overlay div works well. Here is the html code:
ReplyDeleteThank you for posting this tutorial I really loved it :), do you know how would I make the animate works in IE8 and earlier, I added filter:alpha(opacity=40); to overlay class to work in IE8 but the animate I can not figure it out. Thanks in advance
ReplyDeleteNever mind about the comparability it works perfectly :)
ReplyDeleteHow to pop a new html page on click of a link.. Please help me..
ReplyDeleteyou ll need to use ajax and show the output on the popup
ReplyDeleteMost people are complaining about the onload function, Obviously just saying " just remove the onload function from body tag" 10 times is not going to make people understand... Why doesn't the author just give an example of how to do it or show a demo without it??
ReplyDeleteI have mentioned many times that to remove the onload function from body tag. If you dont try then its your coding problem not mine. Anyways check the new demo I have updated the it. Now it has two demos one will load the popup on load and another will load the popup on click.
ReplyDeleteyou can use ajax for it.
ReplyDeleteOn click show the popup and load its content from another file using AJAX
check the new demo now. I have updated it.
ReplyDeletethank you
ReplyDeletejust add a new css line in .overlay class. display:none;
ReplyDeleteyou can create functions and call it for n number of times
ReplyDeletealso remove the body onload function.
ReplyDeletecan you detail your query
ReplyDeleteทดสอบ
ReplyDeletexxxxx
ReplyDeletehi
ReplyDeletenice job! one question, im kind of new in this, can you explain me how to create more functions so i can use it in more links on the same page please?
ReplyDeletehow can I put an image instead text ?
ReplyDelete