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>
John Michael Dumaua
20-Nov-2014Dinesh Karn
16-Jan-2014