Jquery Modal dialogBox using Mvc4

Introduction :

 here in this Tutorial expalin how to display modal dialog box using the razor view with the simple html div by using the jquery plugin and css property .

Tools : visual studio 2012

Now we are create jquery code for  how to open dialog and how to close dialog with div element with css class and id attribute.

First in head section you are need to add Jquery plugin

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialogBox").click(function (e) {
            ShowDialogBox(false);
             $(".dialog_box").draggable();
            $(".dialog_box").resizable();
        });     
   
        $("#btnCancel").click(function (e) {
            HideDialogBox();
           });

        $("#btnSubmit").click(function (e) {
         
            HideDialogBox();
        });
    });
    function ShowDialogBox(M) {
        $("#style_overlay").show();
        $("#dialog").fadeIn(250);

        if (M) {
            $("#style_overlay").unbind("click");
        }
        else {
            $("#style_overlay").click(function (e) {
                HideDialogBox();
            });
        }     
    }
    function HideDialogBox() {
        $("#style_overlay").hide();
        $("#dialog").fadeOut(250);
    }
</script>

---

Now we are add css property to html element to set the dialog box width and height

 <style>
       .dialog_overlay {
           display: none;
           padding: 1;
           left: 1;
           height: 100%;
           width: 100%;
           margin: 0;
           background: #000000;
           opacity: .15;
           filter: alpha(opacity=14);
           -moz-opacity: .14;
           top: 1;
           right: 1;
           bottom: 1;
           z-index: 100;
       }
        .dialog_box {
           display: none;
           position: fixed;
           width: 350px;
           height: 150px;
           top: 45%;
           left: 45%;
           margin-left: -1750px;
           margin-top: -95px;
           background-color: #ffffff;
           border: 1px solid #336699;
           padding: 0px;
           z-index: 102;
           font-family: Verdana;
           border-radius: 9px;
       }
       .dialog_title {
           width:100%;
           height: 30px;
           padding: 0px;
           font-size:18px;
           background-color:green;   
       }
       .tblContent {
           width:100%;
           height:100%;
       }
       table th, td {
           width: 30%;
           height: 25px;
       }
       table tr {
           width: 100%;
           height: 30px;         
       }
       .btn {
           height: 27px;
           width: 30%;
          font-size:10px;
           border-radius: 3px;
           text-align: center;
       }
       .tblfooter {
           width:40%;
           height:25px;
       }
   </style>

---

 Now  add the html element in which we can display the dialoge box with the cancel and submit button and also we can display overlay while the dialog is open.

When you are click on OpenDialog button the dialog can be open

 <input type="button" id="OpenDialogBox" value="OpenDialog" />
<br /><br />

<div id="dialog" class="dialog_box">
    <div class="dialog_title">
        Header
    </div>
    <div class="tblContent">
        <table style="width:100%">
            <tr>
                <td>aa</td>
                <td>bb</td>
                <td>cc</td>
                <td>dd</td>
            </tr>
            <tr>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
                <td>dd</td>
            </tr>
            <tr>
                <td>
                    <input id="btnSubmit" type="button" class="btn" value="Submit" />
                </td>
                <td>
                    <input id="btnCancel" type="button" class="btn" value="Cancel" />
                </td>
            </tr>
        </table>
    </div>
</div>

---

When click on opendialog button the following dialog can open

Screen shot :

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email