jquery弹出美化提示框jqueryAlert_js悬浮提示框资源-CSDN文库

共10个文件

gif：5个

js：3个

css：1个

jquery插件

jquery美化提示框

5星 · 超过95%的资源需积分: 50 33 浏览量 2011-01-10 17:53:07 上传评论收藏 40KB RAR 举报

在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。本文将深入探讨“jquery弹出美化提示框jqueryAlert”这一主题，包括其核心特性、使用方法和实际应用。 jQueryAlert是jQuery的一个扩展插件，专门用于创建美观且高度可定制的提示对话框。与原生JavaScript或jQuery自带的alert函数相比，jQueryAlert提供了一种更加优雅的方式，来展示信息、警告或确认消息，同时提供了丰富的样式和交互选项，以提升用户体验。 1. **核心特性**： - **样式美化**：jQueryAlert提供了一系列预设的样式，使得弹出框的外观不再单调，能够更好地融入各种网站设计风格。 - **自定义内容**：除了文字，用户还可以插入HTML元素，如图片、按钮等，使得提示框内容更丰富、交互性更强。 - **多类型对话框**：支持信息提示、警告、错误、确认等多种类型的对话框，每种类型都有相应的图标和配色方案。 - **回调函数**：用户可以设置点击按钮后的回调函数，实现更复杂的业务逻辑。 - **动画效果**：弹出框的显示和关闭可以添加动画效果，增强用户体验。 2. **使用方法**：需要在项目中引入jQuery库和jQueryAlert插件的CSS及JS文件。然后，通过简单的JavaScript代码即可调用该插件： ```javascript $.alert({ title: '提示标题', content: '这里是提示信息', type: 'info', // 可选值：'info', 'success', 'warning', 'error' buttons: { ok: function() { console.log('用户点击了确定按钮'); } } }); ``` 在这段代码中，`title`用于设置对话框标题，`content`是提示信息，`type`定义了对话框的类型，`buttons`对象则定义了对话框中的按钮及其对应的回调函数。 3. **实际应用**： - **用户反馈**：在用户进行某些操作后，如提交表单，可以使用jQueryAlert显示操作结果，比如成功提交的信息或者错误提示。 - **确认操作**：在删除或修改重要数据时，可以弹出确认对话框，防止误操作。 - **提示信息**：显示系统通知，如更新提示、权限不足警告等。 - **交互反馈**：在用户点击按钮或链接时，提供视觉反馈，告知用户操作正在处理或已成功完成。 4. **拓展与优化**： - **自定义样式**：除了预设样式，用户还可以根据需要编写自定义CSS，以适应特定项目的需求。 - **插件整合**：jQueryAlert可以与其他jQuery插件结合使用，如表单验证插件，实现更复杂的功能。 - **响应式设计**：确保对话框在不同设备和屏幕尺寸下都能良好显示，提高移动设备上的用户体验。 jQueryAlert是一个强大的工具，能够帮助开发者轻松地创建具有吸引力的提示对话框，提升网页应用的用户体验。通过灵活的配置和丰富的功能，它在各种场景下都表现出色，是现代Web开发中的一个有力辅助。

资源推荐

资源详情

资源评论

收起资源包目录

jQueryAlert.rar （10个子文件）

codefans.net

jQueryAlert

jquery.ui.draggable.js 12KB

jquery.alerts.js 7KB

jquery.alerts.css 1KB

images

info.gif 1KB

important.gif 1KB

title.gif 317B

from-download.gif 9KB

help.gif 2KB

jquery.js 54KB

index.html 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JQuery脣璃:alert﹜confirm﹜prompt勤趕遺脣璃-Download by http://www.codefans.net</title> <style type="text/css"> BODY, HTML { padding: 0px; margin: 0px; } BODY { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #FFF; padding: 15px; } H1 { font-size: 20px; font-weight: normal; } H2 { font-size: 16px; font-weight: normal; } FIELDSET { border: solid 1px #CCC; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; padding: 1em 2em; margin: 1em 0em; } LEGEND { color: #666; font-size: 16px; padding: 0em .5em; } PRE { font-family: "Courier New", monospace; font-size: 11px; color: #666; background: #F8F8F8; padding: 1em; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* Custom dialog styles */ #popup_container.style_1 { font-family: Georgia, serif; color: #A4C6E2; background: #005294; border-color: #113F66; } #popup_container.style_1 #popup_title { color: #FFF; font-weight: normal; text-align: left; background: #76A5CC; border: solid 1px #005294; padding-left: 1em; } #popup_container.style_1 #popup_content { background: none; } #popup_container.style_1 #popup_message { padding-left: 0em; } #popup_container.style_1 INPUT[type='button'] { border: outset 2px #76A5CC; color: #A4C6E2; background: #3778AE; } </style>  <script src="jquery.js" type="text/javascript"></script> <script src="jquery.ui.draggable.js" type="text/javascript"></script>  <script src="jquery.alerts.js" type="text/javascript"></script> <link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />  <script type="text/javascript"> $(document).ready( function() { $("#alert_button").click( function() { jAlert('This is a custom alert box', 'Alert Dialog'); }); $("#confirm_button").click( function() { jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { jAlert('Confirmed: ' + r, 'Confirmation Results'); }); }); $("#prompt_button").click( function() { jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) { if( r ) alert('You entered ' + r); }); }); $("#alert_button_with_html").click( function() { jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!'); }); $(".alert_style_example").click( function() { $.alerts.dialogClass = $(this).attr('id'); // set custom style class jAlert('This is the custom class called “style_1”', 'Custom Styles', function() { $.alerts.dialogClass = null; // reset to default }); }); }); </script> </head> <body> <h1>« jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)</h1> <h2>價掛毓瞰</h2> <fieldset> <legend>Alert</legend> <pre> jAlert('This is a custom alert box', 'Alert Dialog'); </pre> <p> <input id="alert_button" type="button" value="Show Alert" /> </p> </fieldset> <fieldset> <legend>Confirm</legend> <pre> jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { jAlert('Confirmed: ' + r, 'Confirmation Results'); }); </pre> <p> <input id="confirm_button" type="button" value="Show Confirm" /> </p> </fieldset> <fieldset> <legend>Prompt</legend> <pre> jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) { if( r ) alert('You entered ' + r); }); </pre> <p> <input id="prompt_button" type="button" value="Show Prompt" /> </p> </fieldset> <h2>詢撰毓瞰</h2> <fieldset> <legend>勤趕遺湍HTML測鎢</legend> <pre> jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!'); </pre> <p> <input id="alert_button_with_html" type="button" value="Show Alert" /> </p> </fieldset> <fieldset> <legend>Alternate Styles</legend> <p> By changing the value of the <samp>$.alerts.dialogClass</samp> property (and creating your own CSS class), you can changes the style of your dialogs: </p> <p> <input id="style_1" class="alert_style_example" type="button" value="Style 1" /> </p> <p> View the plugin source for additional properties that can be modifed at runtime. </p> </fieldset>  </body> </html>

评论收藏

内容反馈

luzhe3014151

2012-09-05

个人表示很喜欢，代码挺多，但容易理解。
众乐乐_2008_统一场

2012-07-13

非常好，在多地方可以用！
leroyljp

2013-02-21

有例子使用相当简单。
jhwalk

2014-12-03

很好用，谢谢
CHEYUI

2013-02-18

jquery的提示框比较好看自由度也比较大，白色小框还行吧。有例子使用相当简单。个人表示很喜欢，代码挺多，但容易理解。非常好，在多地方可以用！.