JQuery插件:alert、confirm、prompt对话框插件
编程技术 / houtizong 发布于 3年前 140
- 简介：本范例是用JQuery实现了一系列的对话框来替代浏览器自己的对话框，包含Alert，Confirm，Prompt对话框，本对话框有如下特点： 1、用户可以自定义对话框的界面 2、可以自定义对话框的标题本提示框使用标准的模式窗口弹出，改变浏览器的大小，窗口位置也会随之改变，可以点击标题拖动对话框
代码使用方法：
在网页<head>区添加以下代码
Select All<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><!-- Dependencies --><script src="jquery.js" type="text/javascript"></script><script src="jquery.ui.draggable.js" type="text/javascript"></script><!-- Core files --><script src="jquery.alerts.js" type="text/javascript"></script><link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /><!-- Example script --><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 classjAlert('This is the custom class called “style_1”', 'Custom Styles', function() {$.alerts.dialogClass = null; // reset to default});});});</script> 调用方法
jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])
和标准的提示对话框不一样，本插件的提示信息可以包含HTML代码，也就是说你可以使用<Br>标签换行等等
本函数不能返回值，要想获得返回值必须通过回调函数，把函数名放在callback的位置即可
详细用户可以参考Demo
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
