---
title: "Custom Dialog Box in MVC"  
description: "In this article, I have described how to create custom/stylish dialog box (Confirmation, Error, Alert, Question, and Information). You can easily modi"  
author: "AVADHESH PATEL"  
published: 2012-12-05  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1067/custom-dialog-box-in-mvc  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 9 minutes  

---

# 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](https://www.mindstick.com/mindstickarticle/c126baf0-7589-48dc-aefc-9f66c769551c/images/b7bf4ad0-edb8-4a27-8d91-2d9664b4c7c6.png)

##### Error Dialog

![Custom Dialog Box in MVC](https://www.mindstick.com/mindstickarticle/c126baf0-7589-48dc-aefc-9f66c769551c/images/3150e8ad-8320-4635-bd84-cb47d38f1b1d.png)

##### Alert/Warning Dialog

![Custom Dialog Box in MVC](https://www.mindstick.com/mindstickarticle/c126baf0-7589-48dc-aefc-9f66c769551c/images/73c98141-6c6a-4677-b6b5-efce23d40535.png)

##### Question Dialog

![Custom Dialog Box in MVC](https://www.mindstick.com/mindstickarticle/c126baf0-7589-48dc-aefc-9f66c769551c/images/66755224-f94a-49c6-9150-679b9fe6acd0.png)

##### Information Dialog

![Custom Dialog Box in MVC](https://www.mindstick.com/mindstickarticle/c126baf0-7589-48dc-aefc-9f66c769551c/images/e3f62d19-3a84-4c27-99f0-22d582c63afd.png)

---

Original Source: https://www.mindstick.com/articles/1067/custom-dialog-box-in-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.