Home > DeveloperSection > Articles > Custom Dialog Box in MVC

Custom Dialog Box in MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
2 Comment(s)
 8372  View(s)
Rate this:

Custom Dialog Box in MVC

In this article, I have described how to create custom/stylish dialog box (Confirmation, Error, Alert, Question, and Information). You can easily modify this dialog box according to your needs. I have given this demo on Visual studio 2010 with ASP.NET MVC4 (Razor). You can use this dialog in HTML, ASP.NET, MVC2, MVC3, etc.

Following Steps are given below to create Custom Dialog Box.

Step 1:- Open MVC project in Visual Studio 2010 with empty and add a Controller (e.g. Home) then create a View (e.g. Index). If you choose another name of Controller and View then change “RouteConfig” in “Global.asax” file for execution default page.

 

Step 2:- Copy and Paste below code on Index.cshtml

    @{

        ViewBag.Title = "Index";

        Layout = "~/Views/Shared/_Layout.cshtml";

    }

    <a href="javascript:confirmation()">Confirmation</a><br />

    <a href="" class="error">Error</a><br />

    <a href="" id="alert">Alert</a><br />

    <a href="" id="question">Question</a><br />

    <a href="" id="information">Information</a><br />

 

 

Step 3:- Create a folder “Shared” named within “Views” folder and add new item (choose “MVC 4 Layout Page (Razor)” option) and change its name with “_Layout.cshtml”. Now Copy and Paste below code on this View’s Head Section.

Dialog css

<style type="text/css">

    .MindstickDialog {

    font-family: Tahoma, Arial, Helvetica, sans-serif;

    font-size: 12px;

    background: #FFF;

    padding: 0px;

    width: 350px;

    color: #222;

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    -webkit-box-shadow: 0px 0px 4px 2px #222;

    -moz-box-shadow: 0px 0px 4px 2px #222;

    box-shadow: 0px 0px 4px 2px #222;

    *border: 1px solid #666;    /* IE6 & 7 */

    border: 1px solid #666\9;   /* IE8 */

}

 

.MindstickDialog .MindstickDialog_Title {

    margin: 0;

    padding: 5px 10px;

    font-weight: bold;

    font-size: 14px;

    background: #222;

    color: #FFF;

    text-align: left;

    -webkit-border-top-left-radius: 4px;

    -webkit-border-top-right-radius: 4px;

    -moz-border-radius-topleft: 4px;

    -moz-border-radius-topright: 4px;

    border-top-left-radius: 4px;

    border-top-right-radius: 4px;

    *padding: 7px 10px;     /* IE6 & 7 */

    padding: 7px 10px\9;    /* IE8 */

}

 

.MindstickDialog .MindstickDialog_Body              { background-repeat: no-repeat; background-position: 10px 10px; padding: 10px; text-align: left }

 

.MindstickDialog .MindstickDialog_Icon              { padding: 10px 10px 10px 68px; min-height: 48px; _height: 48px }

 

.MindstickDialog .MindstickDialog_Confirmation      { background-image: url('../../Images/confirmation.png') }

.MindstickDialog .MindstickDialog_Error             { background-image: url('../../Images/error.png') }

.MindstickDialog .MindstickDialog_Information       { background-image: url('../../Images/information.png') }

.MindstickDialog .MindstickDialog_Question          { background-image: url('../../Images/question.png') }

.MindstickDialog .MindstickDialog_Warning           { background-image: url('../../Images/warning.png') }

 

.MindstickDialog .MindstickDialog_Buttons {

    background: #E5E5E5;

    border-top: 1px solid #DADADA;

    padding: 5px 5px 5px 10px;

    -webkit-border-bottom-left-radius: 5px;

    -webkit-border-bottom-right-radius: 5px;

    -moz-border-radius-bottomleft: 5px;

    -moz-border-radius-bottomright: 5px;

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;

}

 

.MindstickDialog .MindstickDialog_Buttons a {

    text-decoration: none;

    font-weight: bold;

    color: #000;

    background: transparent;

    border: 1px solid #AAA;

    padding: 4px 10px;

    float: right;

    margin-right: 5px;

    min-width: 60px;

    _width: 60px;

    text-align: center;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

}

 

.MindstickDialog .MindstickDialog_Buttons a:hover   { background: #717366; color: #FFF }

 

.MindstickDialogOverlay                         { background: #666 }

    </style>

 

Include JQuery Library file

<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>

 

Dialog JQuery code

<script type="text/javascript">

        ; (function (c) { c.Mindstick_Dialog = function (g, j) { var o = { animation_speed: 250, auto_close: !1, buttons: !0, custom_class: !1, keyboard: !0, message: "", modal: !0, overlay_close: !0, overlay_opacity: 0.9, position: "center", title: "", type: "information", vcenter_short_message: !0, width: 0, onClose: null }, a = this; a.settings = {}; options = {}; "string" == typeof g && (options.message = g); if ("object" == typeof g || "object" == typeof j) options = c.extend(options, "object" == typeof g ? g : j); a.init = function () { a.settings = c.extend({}, o, options); a.isIE6 = c.browser.msie && parseInt(c.browser.version, 10) == 6 || false; if (a.settings.modal) { a.overlay = jQuery("<div>", { "class": "MindstickDialogOverlay" }).css({ position: a.isIE6 ? "absolute" : "fixed", left: 0, top: 0, opacity: a.settings.overlay_opacity, "z-index": 1E3 }); a.settings.overlay_close && a.overlay.bind("click", function () { a.close() }); a.overlay.appendTo("body") } a.dialog = jQuery("<div>", { "class": "MindstickDialog" + (a.settings.custom_class ? " " + a.settings.custom_class : "") }).css({ position: a.isIE6 ? "absolute" : "fixed", left: 0, top: 0, "z-index": 1001, visibility: "hidden" }); !a.settings.buttons && a.settings.auto_close && a.dialog.attr("id", "MindstickDialog_" + Math.floor(Math.random() * 9999999)); var b = parseInt(a.settings.width); !isNaN(b) && b == a.settings.width && b.toString() == a.settings.width.toString() && b > 0 && a.dialog.css({ width: a.settings.width }); a.settings.title && jQuery("<h3>", { "class": "MindstickDialog_Title" }).html(a.settings.title).appendTo(a.dialog); a.message = jQuery("<div>", { "class": "MindstickDialog_Body" + (k() != "" ? " MindstickDialog_Icon MindstickDialog_" + k() : "") }); a.settings.vcenter_short_message ? jQuery("<div>").html(a.settings.message).appendTo(a.message) : a.message.html(a.settings.message); a.message.appendTo(a.dialog); if (a.settings.buttons !== true && !c.isArray(a.settings.buttons)) b = false; else { if (a.settings.buttons === true) switch (a.settings.type) { case "question": a.settings.buttons = ["Yes", "No"]; break; default: a.settings.buttons = ["Ok"] } b = a.settings.buttons.reverse() } if (b) { var d = jQuery("<div>", { "class": "MindstickDialog_Buttons" }).appendTo(a.dialog); c.each(b, function (b, e) { var h = jQuery("<a>", { href: "javascript:void(0)", "class": "MindstickDialog_Button" + b }); c.isPlainObject(e) ? h.html(e.caption) : h.html(e); h.bind("click", function () { void 0 != e.callback && e.callback(a.dialog); a.close(void 0 != e.caption ? e.caption : e) }); h.appendTo(d) }); jQuery("<div>", { style: "clear:both" }).appendTo(d) } a.dialog.appendTo("body"); c(window).bind("resize", i); a.settings.keyboard && c(document).bind("keyup", l); a.isIE6 && c(window).bind("scroll", m); if (a.settings.auto_close !== false) { a.dialog.bind("click", function () { clearTimeout(a.timeout); a.close() }); a.timeout = setTimeout(a.close, a.settings.auto_close) } i(); return a }; a.close = function (b) { a.settings.keyboard && c(document).unbind("keyup", l); a.isIE6 && c(window).unbind("scroll", m); c(window).unbind("resize", i); a.overlay && a.overlay.animate({ opacity: 0 }, a.settings.animation_speed, function () { a.overlay.remove() }); a.dialog.animate({ top: 0, opacity: 0 }, a.settings.animation_speed, function () { a.dialog.remove(); if (a.settings.onClose && typeof a.settings.onClose == "function") a.settings.onClose(void 0 != b ? b : "") }) }; var i = function () { var b = c(window).width(), d = c(window).height(), f = a.dialog.width(), e = a.dialog.height(), f = { left: 0, top: 0, right: b - f, bottom: d - e, center: (b - f) / 2, middle: (d - e) / 2 }; a.dialog_left = void 0; a.dialog_top = void 0; a.settings.modal && a.overlay.css({ width: b, height: d }); if (c.isArray(a.settings.position) && a.settings.position.length == 2 && typeof a.settings.position[0] == "string" && a.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/) && typeof a.settings.position[1] == "string" && a.settings.position[1].match(/^(top|bottom|middle)[\s0-9\+\-]*$/)) { a.settings.position[0] = a.settings.position[0].toLowerCase(); a.settings.position[1] = a.settings.position[1].toLowerCase(); c.each(f, function (b, c) { for (var d = 0; d < 2; d++) { var e = a.settings.position[d].replace(b, c); if (e != a.settings.position[d]) d == 0 ? a.dialog_left = eval(e) : a.dialog_top = eval(e) } }) } if (void 0 == a.dialog_left || void 0 == a.dialog_top) { a.dialog_left = f.center; a.dialog_top = f.middle } if (a.settings.vcenter_short_message) { b = a.message.find("div:first"); d = b.height(); f = a.message.height(); d < f && b.css({ "margin-top": (f - d) / 2 }) } a.dialog.css({ left: a.dialog_left, top: a.dialog_top, visibility: "visible" }); a.dialog.find("a[class^=MindstickDialog_Button]:first").focus(); a.isIE6 && setTimeout(n, 500) }, n = function () { var b = c(window).scrollTop(), d = c(window).scrollLeft(); a.settings.modal && a.overlay.css({ top: b, left: d }); a.dialog.css({ left: a.dialog_left + d, top: a.dialog_top + b }) }, k = function () { switch (a.settings.type) { case "confirmation": case "error": case "information": case "question": case "warning": return a.settings.type.charAt(0).toUpperCase() + a.settings.type.slice(1).toLowerCase(); default: return false } }, l = function (b) { b.which == 27 && a.close(); return true }, m = function () { n() }; return a.init() } })(jQuery);

    </script>

 

 

Dialog setting code

<script type="text/javascript">

        /*

        ---------Confirmation Dialog call by method-----------------*/

        function confirmation() {

            $.Mindstick_Dialog('confirmation message', {

                'type': 'confirmation',

                'title': 'Confirmation'

            });

        }

        /*

        -------- Error Dialog call by class -----------------------*/

        $(document).ready(function () {

            $('.error').bind('click', function (e) {

                e.preventDefault();

                $.Mindstick_Dialog('error message', {

                    'type': 'error',

                    'title': 'Error'

                });

            });

            /*

            ------------ Alert/Warning Dialog call by id -----------*/

            $('#alert').bind('click', function (e) {

                e.preventDefault();

                $.Mindstick_Dialog('alert message', {

                    'type': 'warning',

                    'title': 'Alert'

                });

            });

            /*

            ------ Question Dialog call by id --------------------*/

            $('#question').bind('click', function (e) {

                e.preventDefault();

                $.Mindstick_Dialog('question message', {

                    'type': 'question',

                    'title': 'Question'

                });

            });

            /*

            --------- Information Dialog call by id --------------*/

            $('#information').bind('click', function (e) {

                e.preventDefault();

                $.Mindstick_Dialog('information message', {

                    'type': 'information',

                    'title': 'Information'

                });

            });

        });

    </script>

Screen Shot

Confirmation Dialog

Custom Dialog Box in MVC

Error Dialog

Custom Dialog Box in MVC

Alert/Warning Dialog

Custom Dialog Box in MVC

Question Dialog

Custom Dialog Box in MVC

Information Dialog

Custom Dialog Box in MVC


About Design

By Dinesh Karn on   2 years ago
nice work

Question Dialog

By John Michael Dumaua on   2 years ago
how could i get the value if it is Yes or No in the question dialog box.

Don't want to miss updates? Please click the below button!

Follow MindStick