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;

<script>
    $(function () {
        $("#btnOpenDialog").click(function () {
            $("#dialog-message").dialog("open");
        });
        $("#dialog-message").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script> 

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">
    <p>
        <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"
    </p>
    <p>
        <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
            }
        </cite>
    </p>
</div> 

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
</a>


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



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




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.....


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