JQuery的Alert消息框插件使用介绍

下载JS文件引用到page中，如下代码：


代码如下:

<!-- Dependencies -->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

注意其中draggable是用来实现拖拉的，如不需要这个功能不就不用引用。在目前最近的Jquery1.42下应用引用：


代码如下:

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script>
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

主要方法有：
jAlert(message, [title, callback]) 创建一个alert
jConfirm(message, [title, callback]) 创建一个确认allert,支持callback
jPrompt(message, [value, title, callback]) 创建一个提示框让用户输入值，支持callback如果你有提供
可以参下面的示例Code:


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Defualt.aspx.cs" Inherits="WebApplication6.Defualt" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script>
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#btnAlert").click(function ()
{ jAlert('Pushed the alert button', 'Alert Dialog'); });
$("#btnPrompt").click(function () {
jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {
if (typedValue) {
jAlert('You typed the following ' + typedValue);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Alert Me" id="btnAlert" />
<input type="button" value="Prompt Me" id="btnPrompt" />
</div>
</form>
</body>
</html>

最后alert效果图：
 
打包下载地址 http://www.jb51.net/jiaoben/32367.html

赞 (0)

相关推荐

  • 用vbscript实现在消息框中显示一个超链接

    问: 嗨,Scripting Guy!可以在消息框中包含指向某个 Web 页面的超链接吗? -- CB 答: 嗨,CB.听起来您好像想要向用户显示一个消息框,并且希望在消息框中包含一个超链接,以便用户可以点击这个链接,从而获得更多信息.例如,假设某个用户试图访问一些资源,但被拒绝了.这种情况下,您可以弹出一个消息框,告诉用户访问被拒绝,然后向他们提供一个链接,这个链接指向的页面会告诉用户访问所需的权限.一般说来,这种办法会比简单地说"访问被拒绝"好得多. 那么,是否可以用脚本编写语言实

  • WPF弹出带蒙板的消息框

    WPF弹出带蒙板的消息框

    先看看效果图 思路 拿到父级窗体的内容,放入一个容器里,再在容器里放入一个半透明层.将整个容器赋给父级窗体的内容. 关闭时反向操作. 代码 消息窗弹出时 /// <summary> /// 弹出消息框 /// </summary> /// <param name="message">消息</param> /// <param name="owner">父级窗体</param> public st

  • 基于jQuery的message插件实现右下角弹出消息框

    1.$.messager.lays(width, height); 该方法主要用来定义弹出窗口的宽度和高度. 2.$.messager.anim(type,speed); 该方法主要定义窗口以什么样的方式和速度呈现. $.messager.anim("fade",1000); //以fadeIn的动画方式显示 $.messager.anim("show",1000); //以show的动画方式显示 3.$.messager.show(title,text,time)

  • WPF自动隐藏的消息框的实例代码

    WPF自动隐藏的消息框的实例代码

    (鼠标放上去将一直显示,移开动画继续),提供normal和error两种边框. 介绍:传统的确定,取消,OK,CANCAL之类的对话框太繁琐了,由于项目需要而诞生的仿手机式提示对话框.当然传统的对话框项目中也有,这里就不做介绍了. 出场和退场动画做得很简单,就用Blend随便鼓捣了一番,将就用吧. 预览效果如下: 思路其实很简单:将窗体透明化->布局和样式设计->后台传值调用. 准备工作:Microsoft.Expression.Interactions.dll和System.Windows.

  • ASP.NET中弹出消息框的几种常见方法

    本文实例讲述了ASP.NET中弹出消息框的几种常见方法.分享给大家供大家参考.具体分析如下: 在ASP.NET网站开发中,经常需要使用到alert消息框,尤其是在提交网页的时候,往往需要在服务器端对数据进行检验,并给出提示或警告. 这里,仅介绍几种不同的实现方法. 1.众所周知的方法是采用如下代码来实现: 复制代码 代码如下: Response.Write("<script>alert('弹出的消息')</script>"); 不可否认,这种方法是最常用,也是最

  • 基于.Net实现前端对话框和消息框

    基于.Net实现前端对话框和消息框

    关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不多时.我们来实现自己的对话框和消息框. 对话框 要求:可拖动.点击按钮后可回调 画一个简单的模型框 <div class="hi-dialog-box clearfix"> <div class="hi-dialog-title">系统提示<

  • c++中的消息框messagebox()详细介绍及使用方法

    1.MessageBox("这是一个最简单的消息框!"); 2.MessageBox("这是一个有标题的消息框!","标题"); 3.MessageBox("这是一个确定 取消的消息框!","标题", MB_OKCANCEL ); 4.MessageBox("这是一个警告的消息框!","标题", MB_ICONEXCLAMATION ); 5.MessageBox(&

  • Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)

    Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)

    效果如图,类似 Ext.Msg.alert(); 但没有关闭按钮  由于Extjs4消息框中的关闭按钮,没有执行回调函数,点击关闭按钮后,直接关闭窗口. 实现代码如下: 复制代码 代码如下: Ext.Msg.show({ title : '系统提示', msg : 'Extjs4 去掉提示框右上角关闭按钮', buttons: Ext.Msg.OK, fn: showResult, closable: false });

  • .net 弹出消息框后导致页面样式变乱解决方法

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res

  • C#实现客户端弹出消息框封装类实例

    本文实例讲述了C#实现客户端弹出消息框封装类.分享给大家供大家参考.具体如下: asp.net在服务器端运行,是不能在服务器端弹出对话框的,但是C#可以通过在页面输出JS代码实现弹出消息框的效果,这个C#类封装了常用的消息框弹出JS代码,可以在服务器端调用,在客户端显示对话框.不但可以显示JS的警告框,还可以显示模式窗口,非常方便. using System; using System.Web; using System.Web.UI; using System.Web.UI.WebContro

随机推荐