jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件实例演示
第一步：引入所需要的jquery插件文件：
http://www.angelweb.cn/Inc/eg/jquery.alerts.js
第二步：引入所需的样式：
#popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px;max-width: 600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;border-radius: 5px;}
#popup_title {font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background: #CCC url(/images/eg/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding:0em;margin:0em auto;}
#popup_content {background:16px 16px no-repeat url(/images/eg/info.gif);padding: 1em 1.75em;margin: 0em;}
#popup_content.alert {background-image: url(/images/eg/info.gif);}
#popup_content.confirm {background-image: url(/images/eg/important.gif);}
#popup_content.prompt {background-image: url(/images/eg/help.gif);}
#popup_message {padding-left: 48px;}
#popup_panel {text-align: center;margin:1em 0em 0em 1em;}
#popup_prompt {margin:.5em 0em;}
注意把上面样式中的图片先保存到本地，然后替换成自己的路径！
第三步：就可以直接引用了，看下面简单的实例：
$("#alert_button").click( function() {
jAlert('这是一个可自定义样式的警告对话框', '警告对话框');
});
$("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
});
$("#prompt_button").click( function(){
jPrompt('输入字符:', '这里是默认值', '带输入框的提示框', function(r) {
if( r ){alert('你输入的是 ' + r)};
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>zhezhaoceng.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="<%=contextPath %>/core/js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<style>
#popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px;max-width: 600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;border-radius: 5px;}
#popup_title {font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background: #CCC url(/images/eg/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding:0em;margin:0em auto;}
#popup_content {background:16px 16px no-repeat url(/images/eg/info.gif);padding: 1em 1.75em;margin: 0em;}
#popup_content.alert {background-image: url(/images/eg/info.gif);}
#popup_content.confirm {background-image: url(/images/eg/important.gif);}
#popup_content.prompt {background-image: url(/images/eg/help.gif);}
#popup_message {padding-left: 48px;}
#popup_panel {text-align: center;margin:1em 0em 0em 1em;}
#popup_prompt {margin:.5em 0em;}
</style>
<script type="text/javascript">
$("#alert_button").click( function() {
jAlert('这是一个可自定义样式的警告对话框', '警告对话框');
}); $("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
}); $("#prompt_button").click( function(){
jPrompt('输入字符:', '这里是默认值', '带输入框的提示框', function(r) {
if( r ){alert('你输入的是 ' + r)};
});
}); </script>
</head> <body>
<div id="Con" class="ConDiv"> <fieldset>
<legend>警告提示框（Alert）</legend>
<pre> $("#alert_button").click( function() {
jAlert('这是一个可自定义样式的警告对话框', '警告对话框');
});
</pre>
<p>
<input id="alert_button" type="button" value="警告提示框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#alert_button").click( function() {
jAlert('这是一个可自定义样式的警告对话框', '警告对话框');
});
});
</script> <fieldset>
<legend>确认对话框（Confirm）</legend>
<pre> $("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
});
</pre>
<p>
<input id="confirm_button" type="button" value="确认对话框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
});
});
</script> <fieldset>
<legend>带输入的提示框（Prompt）</legend>
<pre> jPrompt('输入字符:', '这里是默认值', '带输入框的提示框', function(r) {
if( r ) alert('你输入的是 ' + r);
});
</pre>
<p>
<input id="prompt_button" type="button" value="带输入框的提示框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#prompt_button").click( function(){
jPrompt('输入字符:', '这里是默认值', '带输入框的提示框', function(r) {
if( r ){alert('你输入的是 ' + r)};
});
});
});
</script> <fieldset>
<legend>带HTML输出效果的对话框</legend>
<pre> jAlert('你可以使用HTML标签，比如 <strong>加粗</strong>, <em>斜体</em>，和 <u>下划线</u>!');
</pre>
<p>
<input id="alert_button_with_html" type="button" value="显示带有HTML标签效果的弹出框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#alert_button_with_html").click( function(){
jAlert('你可以使用HTML标签，比如 <strong>加粗</strong>, <em>斜体</em>，和 <u>下划线</u>!');
});
});
</script>
</div>
</body>
</html>
jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]的更多相关文章
- 关于abp中使用的sweetalert对话框组件的confirm确认对话框中的一个坑
今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的sweet alert组件. abp框架前端集成了sweet alert 对http请求的error做了全局处理,我在 ...
- confirm确认对话框
还记得之前的javascript入门里的讲的confirm 消息对话框吗?不记得也没关系,我们先来回顾一下,然后在详细讲它. 复习: confirm 消息对话框通常用于允许用户做选择的动作,如:“你对 ...
- Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）
背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...
- asp.net在后台弹出confirm确认对话框并获取用户选择的值做出相应的操作
在asp项目中,这种情况是经常出现的,前段时间通过查找资料以及自己尝试,找到一种解决方案,但是不知是否有更好的方案,以后发现再进行记录. 一.思路 在本次项目中,在一个函数中需要让用户判断,并根据用户 ...
- BootstrapDialog.confirm确认对话框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
- 15 JavaScript弹窗（警告框alert、确认框confirm、提示框Promt）
警告框:window.alert().通常用于确认用户可以得到某些信息 <body> <script type="text/javascript" charset ...
- Selenium系列（九） - 针对alert窗口的处理（警告框、确认框、对话框）
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- jquery easy ui 1.3.4 窗口,对话框,提示框（5）
5.1.window(窗口) 窗口我们在程序中会大量的使用,比如我们的添加.编辑都可以使用窗口实现,与winform的程序非常的类似.下面的代码是创建一个基本的窗口 $(function () { $ ...
- jquery mobile 实现自定义confirm确认框效果
类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery m ...
随机推荐
- js 如何创建一个对象
有两种简单方法可以创建一个空对象: var obj = new Object(); 和: var obj = {}; 这两种方法在语义上是相同的.第二种更方便的方法叫作“对象字面量(object li ...
- poj1182 食物链（种类并查集）详解
poj 1182 http://poj.org/problem?id=1182 分析:这个题大意说的非常清楚了,就是求出假话的个数,题目中给的假话要求有三个 ① 当前的话与前面的某些真的话冲突,是 ...
- Android开发之Menu组件
菜单Menu大致分为三种类型:选项菜单(OptionsMenu),上下文菜单(ContextMenu),子菜单(SubMenu). 1.选项菜单 在一个Activity界面中点击手机Menu键,在屏幕 ...
- linux安装rzsz
rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具优点:比ftp命令方便,而且服务器不用打开FTP服务. sz:将选定的文件发送(send)到本地机器rz:运行该命令 ...
- java 环境变量配置
1.我的电脑 2.属性 3.高级 4.环境变量 5.新建 6.JAVA_HOME: C:\Program Files (x86)\Java 7.CLASSPATH: .;%JAVA_HOME%\;%J ...
- C# Unix时间戳转换为时间
在做一些接口的时候,比如返回数据中有一个时间的属性,它的值是使用Unix时间戳表示的,当我们处理它(保存到本地或者格式化前台展示)时需要转换成日期时间,在此就需要根据时间戳转换为日期时间 (注:Uni ...
- HTTP 417解决方案
在一次模拟HTPP请求时,本人在项目中的一般处理程序中调用客户接口返回非成功的结果.为了方便调试,所以将核心代码拷贝至控制台中进逐个调试. 在控制台中,启动调试时提示: 未经处理的异常: S ...
- 使用ibatis时 sql中 in 的参数赋值
一.问题描述: 1.在使用ibatis执行下面的sql: update jc_jiesuan set doing_time = unix_timestamp(curdate()),doing_stat ...
- 04_过滤器Filter_04_Filter生命周期
[Filter生命周期] [init(FilterConfig filterConfig) throws ServletException] *和Servlet程序类似,Filter的创建和销毁由we ...
- Splay tree
类别:二叉排序树 空间效率:O(n) 时间效率:O(log n)内完成插入.查找.删除操作 创造者:Daniel Sleator和Robert Tarjan 优点:每次查询会调整树的结构,使被查询频率 ...