jQuery实现消息提示框

最新推荐文章于 2023-04-11 08:47:57 发布

Johnny_L_Q

最新推荐文章于 2023-04-11 08:47:57 发布

阅读量957

点赞数

分类专栏： jQuery 文章标签： jQuery ViewUI

本文链接：https://blog.csdn.net/Johnny_L_Q/article/details/84380324

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery实现消息提示框，弹出的是一个层

1、下面是页面


<!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>
<title>jQuery Confirm确认框-download by http://www.codefans.net </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2009 - Eric Martin' />
<!-- Import jQuery and SimpleModal source files -->
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.simplemodal.js' type='text/javascript'></script>
<!-- Confirm JS and CSS files -->
<script src='js/confirm.js' type='text/javascript'></script>
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='confirmDialog'><h2>Confirm Override</h2>
	<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
		<input type='button' name='confirm' value='弹出确认'/> or <a href='#' class='confirm'>您确认吗？</a>
	</form>
</div>
<div id='confirm' style='display:none'>
	<a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a>
	<div class='header'><span>Confirm</span></div>
	<p class='message'></p>
	<div class='buttons'>
	<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</body>
</html>

2、下面是3个JS文件
1、confirm.js
2、jquery.js
3、jquery.simplemodal.js

confirm.js的代码如下：


/*
 * SimpleModal Confirm Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 * Download by http://www.codefans.net
 * Copyright (c) 2009 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: confirm.js 185 2009-02-09 21:51:12Z emartin24 $
 *
 */

$(document).ready(function () {
	$('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) {
		e.preventDefault();

		// example of calling the confirm function
		// you must use a callback function to perform the "yes" action
		confirm("Continue to the SimpleModal Project page?", function () {
			window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
		});
	});
});

function confirm(message, callback) {
	$('#confirm').modal({
		close:false,
		position: ["20%",],
		overlayId:'confirmModalOverlay',
		containerId:'confirmModalContainer', 
		onShow: function (dialog) {
			dialog.data.find('.message').append(message);

			// if the user clicks "yes"
			dialog.data.find('.yes').click(function () {
				// call the callback
				if ($.isFunction(callback)) {
					callback.apply();
				}
				// close the dialog
				$.modal.close();
			});
		}
	});
}

3、以下是CSS代码confirm.css


/*
 * SimpleModal Confirm Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 * Download by http://www.codefans.net
 * Copyright (c) 2009 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: confirm.css 185 2009-02-09 21:51:12Z emartin24 $
 *
 */


/* Overlay */
#confirmModalOverlay {background-color:#eee; cursor:wait;}

/* Container */
#confirmModalContainer {height:140px; width:420px; font-family:'Trebuchet MS', Verdana, Arial; font-size:16px; text-align:left; background:#fff; border:2px solid #336699;}
#confirmModalContainer .header {height:30px; width:100%; background:url(../img/confirm/header.gif) repeat-x; color:#fff; font-size:1.1em; font-weight:bold; line-height:30px;}
#confirmModalContainer .header span {padding-left:8px;}
#confirmModalContainer .message {color:#333; text-align:center; margin:0; padding:12px 4px; font-size:1em;}
#confirmModalContainer .buttons {width:160px; float:right; padding:10px 8px 0;} 
#confirmModalContainer .buttons div {float:right; margin-left:8px; width:70px; height:26px; color:#666; font-weight:bold; text-align:center; background:url(../img/confirm/button.gif) repeat-x; border:1px solid #bbb; cursor:pointer;} 
#confirmModalContainer a.modalCloseX,
#confirmModalContainer a.modalCloseX:link,
#confirmModalContainer a.modalCloseX:active,
#confirmModalContainer a.modalCloseX:visited {text-decoration:none; font-weight:bold; font-size:1.1em; position:absolute; top:-1px; left:400px; color:#ddd;}
#confirmModalContainer a.modalCloseX:hover {color:#9bb3b3;}

附加是整个Demo

Johnny_L_Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现消息提示框

jQuery实现消息提示框，弹出的是一个层1、下面是页面[code="java"]jQuery Confirm确认框-download by http://www.codefans.net Confirm Override A modal dialog override of the JavaScript confirm ...
复制链接

扫一扫