Create a Simple Popup Window HTML5 Dialog Tag


In this tutorial, We’ll see how easy it is to create dialogs using the <dialog> tag.
Modal dialogs (also known as dialog boxes) are pop-ups that open within your website or application. Pop-ups are used frequently on websites, such as a confirmation box asking you if you want to close a tab in a browser. These modal windows are some of the most common UI elements that we can find in websites. Oftentimes, we use jQuery plugins like jQuery UI Dialog, Twitter Bootstrap Modal, or Foundation Modals to create a dialog box. But recently, HTML5 has introduced a new tag called <dialog> that allows us to create a native modal window in an easier way. The only thing to keep in mind, however, is that the <dialog> tag is only supported by Google Chrome, Safari and Opera browsers. IE and Firefox still don’t support the

tag.

Setting The HTML Markup:

<dialog id="window">  
    <h3>Sample Dialog!</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!</p>  
    <button id="exit">Close Dialog  
</dialog>  
<button id="show">Show Dialog</button>  

Using the HTML markup above, the dialog will start in a hidden state, and given the above HTML structure, we will only see the Show Dialog button. To show the dialog window we can use its JavaScript API .show(), and use .close() to hide it. We can achieve that doing the following:

jQuery:

(function() {  
    var dialog = document.getElementById('window');  
    document.getElementById('show').onclick = function() {  
        dialog.show();  
    };  
    document.getElementById('exit').onclick = function() {  
        dialog.close();  
    };  
})();

Clicking on the show dialog button will show the dialog box in the middle of the browser window. You probably noticed that the dialog looks so dull and unattractive.

Dialog1

The good news is that we can style that dialog using normal CSS, and that’s what we’re going to do now!:

dialog {  
    width: 500px;  
    background:#e8e8e8;
    border: 1px solid #dadada;
    font-family:sans-serif;
    padding: 5px 10px 20px 20px;
}  

Using the very simple CSS above we were able to achieve a better looking dialog box as shown below:

Dialog2

Another interesting thing about the dialog element is that it will soon support a new pseudo-element called ::backdrop. It is used to style that typical dim background that we commonly find behind a dialog window. It lets visitors focus more on the dialog and hide everything else behind it.

Wrapping Up:
That’s it! We’ve created a popup dialog without plugins using only HTML and very simple Javascript. Because HTML has evolved so much in the last couple of years, it’s no longer only for constructing a web page. We can even build interactive UI with new HTML elements like

. I hope you enjoyed this quick tutorial.

You can also check the working example here.

HTTP/2 will change the web as we know it. Find out why.
Provided by

10 Responsive jQuery UI Snippets

jQuery has gained immense popularity due to its simplicity in designing websites and a number of other benefits and features. jQuery turned out to be a blessing because it saves designers time in not having to rewrite codes for every screen.

Here are some of the top fresh, simple and beautifully responsive jQuery UI snippets:

1.  ToneDen Player

ToneDen player is a pure Java Script customizable audio player. The UI is very simple and pleasing to the eye. With this snippet,  you have lot of options to change and increase the music experience. The ToneDen SDK is loaded asynchronously which means that the page doesn’t have to wait for SDK to load before rendering.

responsive-jquery-ui-snippets

2. Pizza Pie Charts

This is an easy-to-use plugin for creating a pie chart on any device. Once you display a chart you can style it using SASS features. You can also use CSS to add specific color if you’re not opting for SASS. Once you are done with mark up and style simply initialize the pie chart by calling init function.

responsive-jquery-ui-snippets

3. MultiScroll

This is a Java Script used to create divided multi-scrolling pages. It works with a powerful jQuery plugin by creating two vertical scrolling split pages. It is compatible with all mobile devices and a number of browsers. To use it simply link the script file in <head> tag and the code in <body> tag.

responsive-jquery-ui-snippets

4. TourTip

TourTip is an interactive visual guide of all the elements on the web page. You can use this like a page guide and allow the users to learn the features and functions and  in complex, single-page applications. It is extremely flexible and lets you take the control of how people interact with you. You can add external images or content to display.

responsive-jquery-ui-snippets

5. Tip Cards

Tip Cards allows you to create a card layout for users to flip through. It has been used widely to display blogs, web games or portfolio.

responsive-jquery-ui-snippets

6. Slinky

This is a jQuery plugin used to create beautiful scrolling navigation lists with headers. It allows smooth scrolling because it is lightweight and disables pointer events. It is responsive for various sizes and compatible with all browsers.

responsive-jquery-ui-snippets

7. Vanilla Box

This is a very simple, modern plugin for setting up image galleries. It totally focuses on content and is suitable for all modern browsers. Just link the script and CSS files in the <head> tag of HTML file and call the script.

responsive-jquery-ui-snippets

8. Hashtabber

This plugin can be used for a hashchange-driven tabbed content switcher. There are few pre-set themes for it and you can customize it in several ways.

responsive-jquery-ui-snippets

9. Anchorific

Anchorific automatically generates anchored headings and nested navigation based on header tags. It is easy to install and appropriate for one-page documentation files.

responsive-jquery-ui-snippets

10. Unibox

This is a plugin for creating a universal search box with search suggestions.

responsive-jquery-ui-snippets

HTTP/2 will change the web as we know it. Find out why.
Provided by

jQuery UK 2015 is Almost Here

jQuery UK is back in March (March 6th to be exact) this year with a great line up of speakers.   Just in case you were interested in attending, we thought we would give you a quick breakdown of some of the speakers and what you can expect.  If you don’t feel like ponying up 250 Pounds (and I know I don’t), we expect some of the talks will be posted to YouTube.  Plus, it is only a one day event, but has some nice social events including jBeery (drinking of course) and jQuizzy (a jQuery trivia event).

The event also has some Workshops, but honestly the talks will be a lot more interesting.  So some of the speakers include Anne-Gaelle Colom, a Lecturer at the University of Westminster, where she specializes in mobile (she is also a part of the Mobile jQuery team).  Andy Hume, a software engineer at Twitter and Addy Osmani from Google round out the reps from the big boys.  Soledad Penades,  senior engineer at Mozilla will be speaking, and David Rousset will be talking about 3D integration with jQuery.  He heads up HTML5 and HTML5 gaming at Microsoft.  With Famo.us recently joining the jQuery Foundation, to offer an open-source physics framework for JQuery, this one will be especially interesting.

I’m especially excited to learn that Mark Otto will be giving a talk, he is a co-creator of Bootstrap and currently works at GitHub. Plus, as if you needed another reason to be geeked out, he once designed Britney Spears websites.  Alright, don’t hold it against him, I’m sure he got paid well.  Check out the event in more detail.

Again, most of us are probably not attending, but it’s great to see these jQuery events get the heavy hitters that they deserve.

HTTP/2 will change the web as we know it. Find out why.
Provided by

6 Latest Free jQuery Ebooks

Ever since jQuery libraries have been launched, front-end web development has changed. Websites are now more user-friendly, and with more features than every before. jQuery along with CSS has brought a revolution in website development, and it should continue for years to come.  There are header effects, grid variations, displaying animations, fade-in effects and various other things.

The major reason why jQuery became popular is they allow CSS developers to work with it and take the front seat. You can write absolutely independent and unobtrusive code and place it in the main code anytime. This allows you to edit a website very easily and keep changing the look of it to keep it fresh.  The jQuery library allows you to easily manipulate HTML even after being displayed in a browser and lets you communicate with a server without reloading the page.

Read the rest of this entry »

HTTP/2 will change the web as we know it. Find out why.
Provided by

5 Reasons to Use jQuery

JavaScript and jQuery usage are always up for discussion. Let’s start with basics of of the two and why jQuery might be a better option.

JavaScript is a raw programming language which has been used for a long time by professional IT programmers. It allows the client-side to interact with the user, alter the document content, communicate asynchronously etc. It uses syntax, and programming skills are needed. Thus, one needs to be professional to use it.

jQuery is a Javascript library designed to ease the client-side scripting of HTML. It is fast, concise and very flexible. There are so many libraries available, that we usuallly don’t need to write query for it… unlike Javascript. There are various plugins available for jQuery too, but these are some of the more broad reasons to choose jQuery.

Read the rest of this entry »

HTTP/2 will change the web as we know it. Find out why.
Provided by

Top 10 Best jQuery Image Slider Plugins

jQuery plugins are becoming more and more useful with their superb features. Most of the plugins are available for free and tutorials are available to learn more about them. Websites are presentations of images to tell a story and to add to this it is very important to display images slideshow or gallery in CSS3. Using jQuery you can easily create CSS Gallery image slider or content sliders. With so many features available image sliders are one of the most important and most needed. They are becoming popular daily and thousands of such sliders are available in jQuery.

These plugins will require some basic tweaking to make a brand new slider and make the website more efficient. You only need to add the Captions, images and effects for the image sliders. Rest code is generated by the query. Image sliders also need to be responsive to gain more readers. Since now maximum surfing is done on mobile the codes need to be responsive to all sizes of screens. This way the readers are not restricted to only one category.

Read the rest of this entry »

HTTP/2 will change the web as we know it. Find out why.
Provided by