DNN交互設計-警告對話框dnnAlert（七）

 

界面模式及使用方式

彈出框經常被用來向客戶展示非常重檐的信息。警告框的關鍵就是要保證消息的傳遞。用戶需要採取特別的活動以關閉彈出對話框。

 

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

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 .alert').click(function (event) {
            event.preventDefault();
            $.dnnAlert({ 
                text: '<img style="margin:0 1em 0 0" src="<%=ResolveUrl("Images/Geordi La Forge.jpg")%>" width="200" alt="Geordi La Forge" /> <blockquote style="font-size:12px;">Matter-antimatter mixture ratio settings... at optimum balance. Reaction sequence... corresponding to specified norms. Magnetic plasma transfer to warp field generators per program specs. Commander, we should be going like a bat out of hell!</blockquote>',
                width: 700
            });
        });
    });
</script>