The confirmation dialog is meant to ensure that a user intends to perform an action. This is often done in cases where actions cannot be undone (such as deleting something) or when something substantial will happen (like sending email updates, perhaps).

The user will be responsible for choosing "yes" or "no" and the action will not be taken if they choose the latter. You can also use the confirmation dialog to give users any important message before they make their decision.

<div class="MainDemoArea dnnClear"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum erat ullamcorper erat vulputate fermentum. Morbi posuere neque et lacus tempor ultricies. Nullam sapien nisi, ullamcorper in mollis volutpat, fermentum vel lorem. </p> <ul id="dialogs-demo" class="dnnActions"> <li><a class="confirm dnnPrimaryAction" href="/Sickbay.aspx">See the Confirm Message!</a></li> </ul> </div>

#Body .ui-widget-overlay { background: #000; opacity: .60; filter: Alpha(Opacity=60); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #Body .ui-widget-shadow { margin: 5px 0 0 5px; padding: 0px; background: #999; opacity: .45; filter: Alpha(Opacity=45); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .dnnFormPopup { position: absolute; padding: 0; width: 300px; border: 4px #ccc solid; background: #fff; border-radius: 10px; -moz-border-radius: 10px; } #iPopUp { width: 100% !important; padding-top: 10px; } .dnnFormPopup .ui-dialog-titlebar { padding: 0.8em 1.2em; position: relative; background: #4E4E4E; background: -moz-linear-gradient(top, #4E4E4E 0%, #282828 100%); overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4E4E4E), color-stop(100%,#282828)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4E4E4E', endColorstr='#282828',GradientType=0 ); color: #fff; font-weight: bold; text-shadow: 0px 1px 1px #000; cursor: move; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .dnnFormPopup .ui-dialog-title { float: left; margin: .1em 16px .1em 0; position: relative; font-size: 14px; } .dnnFormPopup a.ui-dialog-titlebar-close { text-indent: -9999em; display: block; position: absolute; right: 10px; top: 10px; background: url(../../images/close-icn.png) no-repeat; height: 24px; width: 24px; } .dnnFormPopup a.dnnToggleMax { float: right; display: block; text-indent: -9999em; background: url(../../images/modal-max-min-icn.png) no-repeat bottom; height: 24px; width: 24px; margin: 1px 24px 0 0; } .dnnFormPopup a.dnnToggleMax.ui-dialog-titlebar-max { background: url(../../images/modal-max-min-icn.png) no-repeat top } .dnnFormPopup .ui-dialog-content, #iPopUp .ui-dialog-content { position: relative; border: 0; padding: 0px; background: #fff; overflow: auto; zoom: 1; } .dnnFormPopup .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } .dnnFormPopup .ui-dialog-buttonpane .ui-dialog-buttonset { float: right } .dnnFormPopup .ui-dialog-buttonpane button { margin: .5em .4em .5em 0.8em; cursor: pointer; padding: 0.5em 1em; } .dnnFormPopup .ui-resizable-se { width: 14px; height: 14px; float: right; background: url(../../images/modal-resize-icn.png) no-repeat bottom; height: 24px; width: 24px; } .dnnFormPopup .dnnDialog { padding: 10px } .dnnLoading { background: #fff url(../../images/loading.gif) no-repeat center center; position: absolute; z-index: 9999; }

<script type="text/javascript"> jQuery(function ($) { $('#dialogs-demo .confirm').dnnConfirm(); }); </script>