DNN交互设计-确认对话框dnnConfirm（八）

 

界面模式及使用

DNN的确认对话框可以帮助用户确认他的一个动作的意图。特别是提示那些不可逆转的操作（例如：删除操作）或者提示一些后续的一系列动作（例如：发送邮件更新）。

用户可以选择Yes或者No，如果用户选择了No那么后续的操作将不被触发。你可以借助确认对话框让用户知晓重要的信息以保证他们做出正确的决定。

 

HTML

<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>            

CSS

    #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;} 

jQuery

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

题外话

DNN7对CSS做了相关的调整，个人觉得DNN7中新的dnnConfrim样式更酷。 ^_*