Dec 9, 2011

JQuery Popup | JQuery Slide Popup

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



 

63 comments :

  1. niiice job
    just what I'm looking for

    thanks

    ReplyDelete
  2. SMEXEHJAMES24/1/12 2:04 AM

    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...

    ReplyDelete
  3. SMEXEHJAMES24/1/12 2:05 AM

    I tried removing the body onload function, but then it doesn't work correctly..

    ReplyDelete
  4. you just need to remove the body onload function, it will work for sure

    ReplyDelete
  5. SMEXEHJAMES24/1/12 2:58 PM

    It 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...

    ReplyDelete
  6. Do you have a working live example? So that I can debug it

    ReplyDelete
  7. SMEXEHJAMES24/1/12 3:13 PM

    It's on a game, hitman
    massacre
    .com

    Feel free to register and the popup is on the profiles when a user clicks on the Envelope and stack of cash

    ReplyDelete
  8. 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

    ReplyDelete
  9. SMEXEHJAMES24/1/12 3:17 PM

    I 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

    ReplyDelete
  10. SMEXEHJAMES24/1/12 3:24 PM

    Give me a few minutes to create one for you..

    ReplyDelete
  11. SMEXEHJAMES24/1/12 3:26 PM

    Username: NtechiPassword: demo1

    ReplyDelete
  12. Ok I found the problem, your left position should be 30% not 100%,

    please check this line of code

    "left": windowWidth/2-popupWidth/2

    ReplyDelete
  13. SMEXEHJAMES24/1/12 3:57 PM

    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
  14. @4751c8a1140ca91ab421a274692f7d06:disqus  Ok I found the reason of the fadein popup in your profile page,

    you are calling closeDialog() function on body load, remove that.

    ReplyDelete
  15. Dipika Chaudhari18/4/12 5:08 PM

    i am trying to close popup right to left direction but it create problem if any solution?????

    ReplyDelete
  16. Do you have any live example? where I can check it and debug it?

    ReplyDelete
  17. [...] Go take a look at this fun site: jquery-popup [...]

    ReplyDelete
  18. [...] 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
  19. How can i stop the first slide in on page load? so that it only start sliding after clicking the button?

    ReplyDelete
  20. Just remove onload attribute from body tag



    change to

    ReplyDelete
  21. can i make this work on two different links?

    ReplyDelete
  22. working 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.

    ReplyDelete
  23. Is 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?

    ReplyDelete
  24. if you want to remove from onload, then remove it from body tag

    ReplyDelete
  25. how to appear a pop after few sec of page load

    ReplyDelete
  26. use window.set timeout function to load it after few secs

    ReplyDelete
  27. works in IE as well, which one you are using?

    ReplyDelete
  28. yes you can easily do that

    ReplyDelete
  29. you can set cookies, but it requires external javascript library, instead use PHP cookie and call that JS only if cookie is empty

    ReplyDelete
  30. Guys if you want to pop up only with click .. just .... give the inline style="display: none" to the over lay div

    ReplyDelete
  31. [...] 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 [...]

    ReplyDelete
  32. This is great! Took a bit to get the stop position where I wanted it but it's all good. Thanks!

    ReplyDelete
  33. Thanks ,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 ?

    ReplyDelete
  34. So how can you use this for more than one link on the same page?

    ReplyDelete
  35. did u get the answer on how to unload on the page load and load only when u click on the link or button

    ReplyDelete
  36. Its very simple just remove the onload function from body tag, this will prevent the popup to load on page load

    ReplyDelete
  37. Thanks a million

    ReplyDelete
  38. Hi 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

    ReplyDelete
  39. I 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 ?

    ReplyDelete
  40. opacity is used to make transparency. If you don't want then simply remove it

    ReplyDelete
  41. I 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?

    ReplyDelete
  42. Thanks to one of the comments. Adding display:none as inline style to overlay div works well. Here is the html code:

    ReplyDelete
  43. Thank 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

    ReplyDelete
  44. Never mind about the comparability it works perfectly :)

    ReplyDelete
  45. Raghuveer.k5/12/12 7:26 PM

    How to pop a new html page on click of a link.. Please help me..

    ReplyDelete
  46. you ll need to use ajax and show the output on the popup

    ReplyDelete
  47. Most 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??

    ReplyDelete
  48. I 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.

    ReplyDelete
  49. you can use ajax for it.
    On click show the popup and load its content from another file using AJAX

    ReplyDelete
  50. check the new demo now. I have updated it.

    ReplyDelete
  51. just add a new css line in .overlay class. display:none;

    ReplyDelete
  52. you can create functions and call it for n number of times

    ReplyDelete
  53. also remove the body onload function.

    ReplyDelete
  54. can you detail your query

    ReplyDelete
  55. ทดสอบ

    ReplyDelete
  56. nice 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?

    ReplyDelete
  57. how can I put an image instead text ?

    ReplyDelete