HomeНаука и техникаRelated VideosMore From: Lon Hosford

HTML CSS Javascript JQuery Webpage Popup Dialog Tutorial

65 ratings | 21889 views
You are probably familiar with seeing popup dialog boxes when visiting web sites. This is a tutorial to show you how to make a web page modal popup using HTML, CSS, Javascript and JQuery. The modal aspect means the user needs to deal with the popup before continuing any interaction with the web page. Source files: http://www.lonhosford.com/make-jquery-custom-popup Topics: Building the CSS and HTML for an Informational Popup Add the Javascript and JQuery for Opening and Closing the Popup Positioning the Popup and Handling Resizing and Screen Orientations Add Page Content Overlay that Can Close the Popup Automatically Open on Page Load
Html code for embedding videos on your blog
Text Comments (14)
JNIT Works (1 year ago)
Thank you so much. That what I'm looking..
Nazrul Islam (1 year ago)
Thanks a lot Brother
afghan boy (2 years ago)
thank you Mr Lon Hosford . this was the coolest and greatest tutorial i ever seen in these types of Tutorial Series. AWESOME !!!
Sunny Sung (3 years ago)
Awesome tutorial Mr Lon Hosfor.
Dwinar7 (3 years ago)
How to make popup appear only once for each client? Do you check client's cookies or something along those lines?
Dwinar7 (3 years ago)
+Lon Hosford OK, thanks. I'm on a good track again.
Lon Hosford (3 years ago)
You can do Server Session variable or Client Cookie to store persistent value between page loads.
Sunny Singh (4 years ago)
i want custom pop up which will subscribe youtube then only anyone can enter the website i want that, can u suggest me how to do that
Lon Hosford (4 years ago)
+Sunny Kumar  Take a look at the links in my previous post, and determine if you can follow and understand them.
Sunny Singh (4 years ago)
+Lon Hosford  ya right sir you got it what i want .. I want pop overlay in which if anyone subscribe my youtube channel then only he can enter my website if already subscribed then direct entry  i want that sir .. can you guide me please please
Lon Hosford (4 years ago)
I am not sure that I fully understand it, but here are what I think I got from it. You want someone to arrive at your webpage, be faced with a popup overlay that requires subscribing to Youtube before dismissing the popup overlay.  I would look at the Youtube API https://developers.google.com/youtube/v3/. Perhaps the https://developers.google.com/youtube/youtube_subscribe_button page is the answer. Take a look at the Events Handling. You could code this into the JQ popup overlay.
Ardy Aryan (4 years ago)
beautifully done, thanks a lot
Koen Joos (4 years ago)
Great tutorial
vishal vazkar (4 years ago)
Very neat and nice example. Thanks a lot

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.