![]() If you’ve looked into the popup.js file at all you should notice a couple of things. ![]() Some real simple rounded corners in CSS3 makes the dialog feel less rigid than standard square corners. Additionally I’ve increased the border size to stand out as more significant in comparison with the deep background. Inside the myPopup content box is all the heading text/closing link shown earlier. However I am noticing designers picking up CSS3 transitions which may eventually overtake this technique. Notice that we actually reduce the opacity with jQuery instead of CSS3, that way we’ve got more control over the animation. The backgroundPopup has an important role set to a black background color. Now we have some of the juicier details pertaining with CSS3 properties out of the way. This bug has mostly been reserved to IE and Safari but it fixes other possible issues as well. This is important because even if your page content isn’t long enough to create one, a scrollbar will appear in some instances when your popup first opens. Thus we remove all generic margins, padding, and inherit the default line-height appropriate to each font style.Īlso pick up how the body selector uses height: 101% so the page loads by default displaying a scrollbar. The Asterisk (*) selector is handy as an overall reset to browser defaults. Styling with CSSįirst check out the page structure I’ve used for each core element. Yet we are using a bit of flair around the box to appear more animated. A lot has been kept similar to Adrian’s code in his previous tutorial. So now let’s jump over and take a quick peek at some of our CSS styles. If you noticed, our script will actually close down the window if you click anywhere else in the background! Pretty neat effect and very influential towards user experience. Outside the backgroundPopup is used to differentiate between these 2 areas. Inside our CSS rules we also set the default height, width, background, and similar properties of this box. Ultimately jQuery is looking for the ID “displaypopup” to match and trigger a bind-click event handler.Īll the content inside myPopup will be displayed within this new box. The displaypopup button could theoretically hold any item – anchor link, heading text, or even a replacement image. Inside the wrap div we’ve got all our main elements from within the tutorial. I’ve included just this portion again for ease of access. Now that we have a page template setup I’d like to introduce a bit of the body content. It has never been down for me, and I always rely on their hosted code for project files. Check out my beginner’s template code below.īoth the jQuery standard and UI libraries can be pulled directly from Google’s CDN. The stylesheet style.css will include both the properties for our popup and for some of the new page edits. This includes the doctype declaration and our starting scripts. Thus I’ve created a brand new HTML document index.html and included my basic HTML5 boilerplate template. Since the earlier tutorial was written a few years ago I feel we should work with only the important, up-to-date code bits. To get a hold of their demo just download the rar package which includes the popup.js file. yens design has a fantastic bit of code written in jQuery which behaves as a popup box. Now to save time let’s work off a bit of code from an earlier tutorial published in 2008. ![]() But your functional code will become much more convoluted with this extra pressure. If you wish to include animated effects from the jQuery UI library you may include this script as well. As of this writing it’s 1.7.1 stable release. Your first step is to hit the jQuery website and check on their latest version. Live Demo Download Source Code Setting the Stage
0 Comments
Leave a Reply. |