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樣式更酷。 ^_*