DNN交互设计-警告对话框dnnAlert(七)
2013-11-26 01:17
393 查看
界面模式及使用方式
弹出框经常被用来向客户展示非常重檐的信息。警告框的关键就是要保证消息的传递。用户需要采取特别的活动以关闭弹出对话框。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>
相关文章推荐
- DNN交互设计-确认对话框dnnConfirm(八)
- DNN交互设计-Tabs(三)
- javascript 警告(alert 消息对话框)
- DNN交互设计-模块消息 (十)
- FLEX 如何跳出警告对话框 Alert
- javascript:警告(alert 消息对话框),确认(confirm 消息对话框)
- 第三章 警告(alert 消息对话框)
- DNN交互设计-Panels可收缩界面(四)
- Android AlertDialog警告对话框实现
- 警告(alert 消息对话框)
- DNN交互设计-输入文本项(五)
- Android AlertDialog警告对话框实现
- DNN交互设计-网格视图dnnGrid(十一)
- javascript:警告(alert 消息对话框),确认(confirm 消息对话框)
- C#实现在前端网页弹出警告对话框(alert)的方法
- DNN交互设计-日期选择控件(六)
- DNN交互设计-综合使用界面模式
- DNN交互设计-CSS基础
- DNN交互设计-介绍(一)
- DNN交互设计-按钮(十二)