DNN UX Guide > UI Patterns

UI Patterns → Alert Dialog

Alert Dialog Demo

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur pretium diam ut quam sagittis pretium.

See this Alert!

The alert is a pattern used when you want to display an important message to a user. The point of the alert is to make sure that a message is conveyed. The user will need to take a specific action to dismiss the alert. Try out the alert above to see it in action.

<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> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur pretium diam ut quam sagittis pretium.</p> <ul id="dialogs-demo" class="dnnActions"> <li><a class="alert dnnPrimaryAction" href="#">See this Alert!</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; }