WRITTEN BY

ntechi

VN:F [1.9.22_1171]
Rating: 4.0/5 (23 votes cast)

Download

Demo

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.

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');
			});
		});
	});
}

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.

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

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

 

JQuery Popup | JQuery Slide Popup, 4.0 out of 5 based on 23 ratings

Download

Demo

  • Xasdff

    niiice job
    just what I’m looking for

    thanks

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    • Tiago

      Great Job

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: -1 (from 1 vote)
  • SMEXEHJAMES

    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…

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    • SMEXEHJAMES

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      • Ntechi

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

        VA:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
        • SMEXEHJAMES

          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…

          VA:F [1.9.22_1171]
          Rating: 0.0/5 (0 votes cast)
          VA:F [1.9.22_1171]
          Rating: 0 (from 0 votes)
          • Ntechi

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

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • SMEXEHJAMES

            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

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • Ntechi

            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

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • SMEXEHJAMES

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

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • SMEXEHJAMES

            Username: NtechiPassword: demo1

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • Ntechi

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

            please check this line of code

            “left”: windowWidth/2-popupWidth/2

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • SMEXEHJAMES

            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.

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
          • SMEXEHJAMES

            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

            VA:F [1.9.22_1171]
            Rating: 0.0/5 (0 votes cast)
            VA:F [1.9.22_1171]
            Rating: 0 (from 0 votes)
  • Ntechi

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
  • Dipika Chaudhari

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: -1 (from 1 vote)
    • Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: -1 (from 1 vote)
  • Pingback: la7ax9u ajax - Guitar Forum DailyGuitar.com

  • Pingback: How to Make Sliding Popup with jQuery | Daily Syntax

  • Pingback: ic0jj1v css3-portfolio - Guitar Forum DailyGuitar.com

  • Dedeismus

    How can i stop the first slide in on page load? so that it only start sliding after clicking the button?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Ntechi

      Just remove onload attribute from body tag

      change to

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • billy

    can i make this work on two different links?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

      yes you can easily do that

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Basjhar

    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.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • http://www.facebook.com/desperate.derrick Derrick See

    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?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • http://www.facebook.com/hello.adityatiwari Aditya Tiwari

    Not working with IE. :(

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Pradeep

    how to appear a pop after few sec of page load

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Atif Azad

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

      also remove the body onload function.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Pingback: Day 5 / Web / Wireframe & Mock-up - MFA D+T Bootcamp 2012

  • skid

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • shek

    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 ?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

      can you detail your query

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • http://www.facebook.com/stephen.downs.58 Stephen Downs

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Vijaya

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Avishek

    Thanks a million

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Carl R

    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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Nizar

    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 ?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • krishna

    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?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

      check the new demo now. I have updated it.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • krishna

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Abe

    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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • abe

      Never mind about the comparability it works perfectly :)

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
      • http://webstutorial.com/ Ntechi

        thank you

        VA:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.22_1171]
        Rating: 0 (from 0 votes)
  • Raghuveer.k

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ ntechi

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

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

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

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • Matt

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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • http://webstutorial.com/ Ntechi

      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.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  • ปปป

    ทดสอบ

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • ปปป

    xxxxx

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • ali

    hi

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • Sebas

    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?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  • invi

    how can I put an image instead text ?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)