超漂亮的弹出框,alert,confirm,AJAX弹出层有一套自己的统一风格资源-CSDN下载

共33个文件

png：19个

gif：7个

html：4个

5星 · 超过95%的资源需积分: 50 97 浏览量 2009-12-17 10:34:19 上传评论 1 收藏 194KB RAR 举报

在网页设计中，用户体验往往与界面的美观度和交互性紧密相关。"超漂亮的弹出框,alert,confirm,AJAX弹出层有一套自己的统一风格"这一标题和描述所体现的是网页中的一种常见交互元素——弹出框的优化设计。这种设计不仅注重功能实用性，更强调视觉效果和整体风格的一致性，为用户提供更佳的浏览和操作体验。弹出框是网页中用于提示、确认或获取用户输入的重要工具，常见的有alert、confirm和prompt三种原生JavaScript弹出框。Alert框通常用来显示警告信息，只有一个确定按钮；Confirm框用于确认操作，包含“确定”和“取消”两个选项；Prompt框则用于让用户输入文本。然而，原生的弹出框样式单一，无法满足设计师对界面美观度的需求，因此，开发者们通常会自定义更符合品牌风格的弹出框，这就是所谓的"统一风格"的弹出层。一套统一风格的弹出框设计包括以下几个方面： 1. **样式一致性**：弹出框的边框、背景色、字体、图标等视觉元素应与网站的整体设计风格保持一致，提升品牌形象和用户体验。 2. **交互逻辑**：弹出框应遵循用户习惯，例如，确认操作通常放置在右侧，取消操作在左侧，按钮颜色应有明确的区分，如确认通常是鲜明的颜色，取消则是灰色或淡色。 3. **动画效果**：弹出框的出现和消失可以添加过渡动画，如淡入淡出、滑动等，增加互动感，同时避免突然出现打断用户的浏览流程。 4. **响应式布局**：考虑到不同设备的屏幕尺寸，弹出框应具备良好的响应式设计，确保在手机、平板电脑和桌面端都能正常显示和使用。 5. **AJAX集成**：利用AJAX技术，弹出框可以实现异步数据加载，比如在不刷新页面的情况下进行表单提交或获取服务器数据，提高页面的流畅性和效率。 6. **可配置性**：为了适应不同的场景需求，弹出框应提供多种配置选项，如大小、位置、内容类型（文字、图片、表格等）。 7. **易用性**：确保用户能够轻松关闭弹出框，例如添加明显的关闭按钮，或者允许用户通过点击弹出框外的区域来关闭。文件名"Dialog"可能指的是一个自定义弹出框的库或组件，它可能包含了实现上述功能的代码和资源。使用这样的库，开发者可以快速地在项目中集成美观且功能强大的弹出框，从而提升网页的交互性和专业性。在实际开发中，选择合适的弹出框库，如SweetAlert、Bootbox.js等，可以帮助我们更高效地实现这一目标。

资源推荐

资源详情

资源评论

收起资源包目录

DialogFrame.rar （33个子文件）

Dialog

[强烈推荐] 超漂亮的仿腾讯弹出层效果(兼容主流浏览器).html 3KB

UntitledFrameset-20.html 655B

[强烈推荐] 超漂亮的仿腾讯弹出框效果(兼容主流浏览器).html 4KB

images

dialog_mlb.png 3KB

icon_alert.gif 680B

dialog_mrt.png 3KB

dialog_lt.png 3KB

dialog_rb.png 3KB

dialog_mrb.png 3KB

dialog_lb.png 3KB

window.gif 1KB

dialog_mc.gif 1KB

dialog_mrm.png 3KB

snap.png 109KB

icon_dialog.gif 92B

dialog_closebtn_over.gif 441B

dialog_footerleft.png 3KB

dialog_closebtn.png 3KB

icon_query.gif 687B

dialog_mlt.png 3KB

dialog_closebtn_over.png 3KB

dialog_footercenter.png 3KB

Thumbs.db 34KB

dialog_closebtn.gif 388B

dialog_ct.png 6KB

dialog_mlm.png 3KB

dialog_cb.png 4KB

dialog_footerright.png 3KB

dialog_rt.png 3KB

dialog_bg.jpg 22KB

dialog_mc.png 4KB

Dialog.js 28KB

Untitled-3.html 311B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>【强烈推荐】超漂亮的仿腾讯弹出层效果（兼容主流浏览器）</title> <script type="text/javascript" src="Dialog.js"></script> <script type="text/javascript"> function zOpenD(){ var diag = new Dialog("Diag1"); diag.Width = 900; diag.Height = 400; diag.Title = "弹出窗口示例"; diag.URL = "http://demo.zving.com/"; diag.ShowMessageRow = true; diag.MessageTitle = "弹出窗口示例"; diag.Message = "在这儿你可以对这个窗口的内容或功能作一些说明"; diag.OKEvent = zAlert;//点击确定后调用的方法 diag.show(); } function zOpen(){ var diag = new Dialog("Diag2"); diag.Width = 900; diag.Height = 400; diag.Title = "弹出窗口示例"; diag.URL = "http://demo.zving.com/"; diag.OKEvent = zAlert;//点击确定后调用的方法 diag.show(); } function zOpenInner(){ var diag = new Dialog("Diag3"); diag.Width = 300; diag.Height = 100; diag.Title = "弹出窗口示例"; diag.innerHTML='<div style="text-align:center">直接输出html，使用dialog.<b>innerHTML</b>。</div>' diag.OKEvent = function(){diag.close();};//点击确定后调用的方法 diag.show(); } function zOpenEle(){ var diag = new Dialog("Diag4"); diag.Width = 300; diag.Height = 100; diag.Title = "弹出窗口示例"; diag.innerElementId="forlogin" diag.OKEvent = function(){$E.getTopLevelWindow().$("username").value||alert("用户名不能为空");$E.getTopLevelWindow().$("userpwd").value||alert("密码不能为空")};//点击确定后调用的方法 diag.show(); } function zAlert(){ Dialog.alert("你点击了一个按钮"); } function zConfirm(){ Dialog.confirm('警告：您确认要XXOO吗？',function(){Dialog.alert("yeah，周末到了，正是好时候");}); } function sometext(ele,n){ var strArr=["可","以","清","心","也"]; var writeStr="" for(i=0;i<n;i++){ index=parseInt(Math.random()*5); for(j=0;j<5;j++){ str=index+j>4?index+j-5:index+j; writeStr+=strArr[str]; } } $(ele).innerHTML=writeStr; } </script> </head> <body> <div id="div1"></div> <p>     <input type="button" value="弹出新窗口" onclick="zOpen()" /> <input type="button" value="弹出带说明的新窗口" onclick="zOpenD()" /> <input type="button" value="弹出信息提示对话框" onclick="zAlert()" /> <input type="button" value="弹出选择对话框" onclick="zConfirm()" />  <input type="button" value="弹出内容为HTML代码" onclick="zOpenInner()" />  <input type="button" value="弹出内容为本页面内的隐藏层" onclick="zOpenEle()" />         <select name="select1"> <option>不要挡住我，不要挡住我</option> <option>不要挡住我，不要挡住我</option> <option>不要挡住我，不要挡住我</option> </select></p> <div id="div2"></div> <div id="forlogin"><table width="100%" border="0" align="center" cellpadding="4" cellspacing="4" bordercolor="#666666"> <tr> <td colspan="2" bgcolor="#eeeeee">用户登陆</td> </tr> <tr> <td width="50" align="right">用户名</td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td align="right">密　码</td> <td> <input type="text" id="userpwd" /> </td> </tr> </table></div> <script>//sometext("div1",200);sometext("div2",200);</script> </body> </html>

评论收藏

内容反馈