{"id":9088,"date":"2014-08-28T05:08:55","date_gmt":"2014-08-27T19:08:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9088"},"modified":"2014-08-28T05:08:55","modified_gmt":"2014-08-27T19:08:55","slug":"jquery-ui-modal-dialog-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/jquery-ui-modal-dialog-primer-tutorial\/","title":{"rendered":"jQuery UI Modal Dialog Primer Tutorial"},"content":{"rendered":"
\"jQuery<\/a>

jQuery UI Modal Dialog Primer Tutorial<\/p><\/div>\n

A lot of the things people like about the Web are to do with JavaScript and client-side activities. Adding to that experience are Javascript libraries packed full of features. Probably the best known of these is jQuery.<\/p>\n

Read more about the powerful jQuery Javascript library here<\/a> (at its spiritual home) and here<\/a> (at Wikipedia) … and in the previous relevant jQuery UI Dialog Primer Tutorial<\/a> as shown below, which simulated the alert, confirm and prompt Javascript windows using jQuery functionality.<\/p>\n

Today we have a modal dialog box which is movable, and this is a step up from the alert Javascript box, which can sometimes “get in the way” of something you want to see below. With this jQuery solution you get the best of both worlds, if you do not want to move on without getting an “answer” from the user, but also want the user to be able to see what is shown below, that, maybe, they will be able to reach if they “answer”. Have put the word answer in double quotes, because, today’s modal dialog box is most like the Javascript alert box, where, to answer, you can only press the “OK” button.<\/p>\n

Click on picture above<\/a> to go to jQuery page for a (live run) tutorial on a UI feature of jQuery called Modal Dialog.<\/p>\n

Link to today’s HTML\/Javascript\/jQuery downloadable code you could call modal_dialog.html<\/a>.<\/p>\n

Link to jQuery information … via Wikipedia, from where quote above is derived<\/a>.
\nLink to jQuery spiritual home page … via jQuery Foundation<\/a>.
\nLink to jQuery download page … download jQuery UI code used, here<\/a>.<\/p>\n

Regarding this topic I really like “JavaScript & Ajax” seventh edition by Tom Negrino and Dori Smith<\/em> pages 432 and 433. The code in this book was followed closely, with small amendments.<\/p>\n

\n

Previous relevant jQuery UI Dialog Primer Tutorial<\/a> is shown below.<\/p>\n

\"jQuery<\/a>

jQuery UI Dialog Primer Tutorial<\/p><\/div>\n

A lot of the things people like about the Web are to do with JavaScript and client-side activities. Adding to that experience are Javascript libraries packed full of features. Probably the best known of these is jQuery.<\/p>\n

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.[4] It was released in January 2006 at BarCamp NYC by John Resig. It is currently developed by a team of developers led by Dave Methvin. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.[5][6]<\/p>\n

jQuery is free, open source software, licensed under the MIT License.[7] jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.\n<\/p><\/blockquote>\n

Click on picture above<\/a> to go to jQuery page for a tutorial on a UI feature of jQuery called Dialog.<\/p>\n

Link to jQuery information … via Wikipedia, from where quote above is derived<\/a>.
\nLink to jQuery spiritual home page … via jQuery Foundation<\/a>.
\nLink to jQuery download page … download jQuery here<\/a>.
\nLink to jQuery UI Dialog page … jQuery UI Dialog<\/a> (one of many jQuery UI ideas).<\/p>\n