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带输入的提示框插件[附实例演示]的更多相关文章

  1. 关于abp中使用的sweetalert对话框组件的confirm确认对话框中的一个坑

    今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的sweet alert组件. abp框架前端集成了sweet alert 对http请求的error做了全局处理,我在 ...

  2. confirm确认对话框

    还记得之前的javascript入门里的讲的confirm 消息对话框吗?不记得也没关系,我们先来回顾一下,然后在详细讲它. 复习: confirm 消息对话框通常用于允许用户做选择的动作,如:“你对 ...

  3. Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）

    背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...

  4. asp.net在后台弹出confirm确认对话框并获取用户选择的值做出相应的操作

    在asp项目中,这种情况是经常出现的,前段时间通过查找资料以及自己尝试,找到一种解决方案,但是不知是否有更好的方案,以后发现再进行记录. 一.思路 在本次项目中,在一个函数中需要让用户判断,并根据用户 ...

  5. BootstrapDialog.confirm确认对话框

    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...

  6. 15 JavaScript弹窗（警告框alert、确认框confirm、提示框Promt）

    警告框:window.alert().通常用于确认用户可以得到某些信息 <body> <script type="text/javascript" charset ...

  7. Selenium系列（九） - 针对alert窗口的处理（警告框、确认框、对话框）

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  8. jquery easy ui 1.3.4 窗口,对话框,提示框（5）

    5.1.window(窗口) 窗口我们在程序中会大量的使用,比如我们的添加.编辑都可以使用窗口实现,与winform的程序非常的类似.下面的代码是创建一个基本的窗口 $(function () { $ ...

  9. jquery mobile 实现自定义confirm确认框效果

    类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery m ...

随机推荐

  1. SQL SERVER格式化字符串位数，不足补零

    本文举例在SQLSERVER中将1格式化为001的方法: 1.方法一SQL语句执行如下: ,) as col 2.方法二SQL语句执行如下: ,) ,) as col 下面是C#代码实现方法: ; & ...

  2. ACM/ICPC ZOJ1003-Crashing Balloon 解题代码

    #include <iostream> using namespace std; int main() { int **array = new int *[100]; for ( int ...

  3. win向linux传文件

    使用pscp.exe即可. 下载pscp.exe(http://pan.baidu.com/s/1jG6zmx4) 复制到windows/system32目录下即可. 然后可在cmd命令行下使用psc ...

  4. NewtonSoft.json 序列化和反序列化实例

    在百度 API Store 找个旅游的 API 来当成本次 Demo 的例子 接口地址:http://apis.baidu.com/apistore/attractions/spot AIPKEY: ...

  5. 安装oracle pl/sql developer

    1.在官网上下载oracle 11g R2版本的数据库,直接常规安装.数据库可以下载32bit. 2.在这里下载oracle client (32bit)http://www.oracle.com/t ...

  6. HTML5游戏开发框架phaser学习日志（一）下载phaser，在IIS中配置phaser的examples站点

    phaser是HTML5开源的游戏引擎. 一.源码下载地址:https://github.com/photonstorm/phaser 二.文档结构: 三.将phaser-master部署到IIS中站 ...

  7. 24种设计模式--责任链模式【Chain ofResponsibility Pattern】

    中国古代对妇女制定了“三从四德”的道德规范,“三从”是指“未嫁从父.既嫁从夫.夫死从子”,也就是说一个女性,在没有结婚的时候要听从于父亲,结了婚后听从于丈夫,丈夫死了还要听儿子的,举个例子来说,一个女 ...

  8. 菜鸟的MySQL学习笔记（三）

    4-1插入记录INSERT INSERT [INTO] tbl_name [(col_name)] {VALUES|VALUE} ({expr|DEFAULT},...), (...), ...   ...

  9. tomcat server.xml配置文件 解析

      把服务拆分出来了.      前几天我也进行了拆分.可是当时服务起不来所以我想会不会有什么设置,使得这个服务在主机中只能启一个.然后我又找了一台服务器,也把代码放了进去.结果仿佛是我料想到的样子, ...

  10. Javascript执行环境、作用域链

    执行环境 可以把执行环境想象为一个圆圈,里面包含了一些变量.函数. 执行环境定义了变量或函数的有权访问的其他数据,决定了它们各自的行为.还有一个顶部执行环境.在浏览器中,顶部执行环境既为window, ...