Wednesday, May 28, 2014

Step By Step How to create a Modal JQuery UI Dialog widget in 10 minutes

        By Carmel Shvartzman

In this tutorial we'll learn how to create a Modal JQuery UI Dialog widget in 10 minutes. The jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.

We'll want to add to our MVC site a Modal jQuery Dialog , showing as follows:

For the sake of using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, we'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).

The present section is a sub-tutorial about importing the JQuery UI to our app: you can delay it if you already have done it, or you can see the complete step by step  in a former tutorial.

This is the BEGIN of the  sub-tutorial section: -----------------------------------------------------

First of all, we need to download the Theme from the JQuery UI site, so browse to the site and go to the "Themes" tab:

Select from the "Gallery" the theme you like the most, and download it. I choose the "Le-Frog":

After you download it, extract all from the .ZIP file :

We'll use some of these files. But first , we need to update the javascript jQuery files in our project, because the files which comes with Visual Studio will be obsolete. Open the NuGet utility:

Make a search for the JQuery package and install it:

Do the same for the JQuery UI package:

Now open the Theme's folder we downloaded and copy the entire theme which is inside the "development-bundle" folder:

Paste the folder inside the "themes" folder inside your project:

It will show as follows:

We'll make use of the .CSS file jquery-ui.css. Open the BundleConfig file:

Take a look at these ScriptBundles, because we'll use them inside our app:

Replace the "base" folder by the "le-frog" folder, and add the jquery-ui.css file to the script:

Next, we'll call the bundles from the _Layout file:

Locate the Render "jquery" section and cut it:

Locate the render at the <head> section:

Paste there the "jquery" section , and add the "jqueryui" bundle:

We're done with the javascript and the style we'll need.
Now we'll add the Dialog widget to the Index View. Create a new View:

This is the END of the  sub-tutorial section --------------------------------------------------------

To get the code of the Dialog, browse to the "Development" tab at the JQUERY UI site, and select  the "Dialog" Widget, and the "Animation" example:

Then go to the "View source", because we'll customize the STYLE, SCRIPT and DIV sections of the Widget to make our own Dialog:

Copy the <SCRIPT> tag from the JQuery UI site:

Put  an <script> tag inside your Index file, and customize the Dialog with the following code:

Here we have the following code:
1) "modal" = true: to make MODAL the Dialog;
2) "buttons" : when the button is pressed, will close the Dialog;
3) a #btnOpenDialog : when the "Open..." button is clicked, show the Dialog using the dialog("open ") function;

    $(function () {
        $("#btnOpenDialog").click(function () {
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            hide: {
                effect: "explode",
                duration: 1000
            modal: true,
            buttons: {
                Ok: function () {

Copy the Dialog <div> markup:

And paste it somewhere inside our Index file, with the following customization:

<div id="dialog-message" title="Settings for the Modal Dialog">
        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
        "autoOpen" must be set to "false"
        <br />
        "modal" must be set to "true"
        <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
        To modify the Show and the Hide effects :
        <br />
        <cite>show: {
                effect: "blind",
                duration: 1000
            }<br />
            hide: {
                effect: "explode",
                duration: 1000

Also, add a button to open the dialog from the Client side:

<a id="btnOpenDialog" href="#" class="ui-state-default ui-corner-all">
    Open the Modal Dialog

Last but not least, we need to customize the style of the button:

    #btnOpenDialog {
        position: fixed;
        left: 50%;
        width: 150px;
        margin-left: -75px;
        padding: 5px 5px;
        text-decoration: none;
        font: 900 12px georgia;
        color: #FFF;

Finally, let's run the application to see the Dialog in action. The Button when clicked will open the Dialog:

The Dialog remains opened in a Modal way:

...and when closed it "explodes" :

If you don't want the Dialog to be Modal, just write "modal = false" in the script:

That's all!! 
In this tutorial we've learn how to create a Modal JQuery UI Dialog widget in 10 minutes.  

Happy programming.....

כתב: כרמל שוורצמן