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
分享到：
相关推荐
jQuery UI Messager是一款基于jQuery和jQuery UI库的插件，用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知，如警告、错误、信息和成功消息，增强了用户交互体验。这个...
本文将详细探讨如何利用jQuery实现一个绚丽的弹出消息窗口。 首先，理解jQuery的基本语法是实现这一功能的基础。jQuery的核心概念是选择器（Selector），它用于定位HTML文档中的元素。例如，“$(‘#id’)”会选择ID...
2. **jQuery UI和Bootstrap**：jQuery本身并不直接提供弹出消息提示框的功能，但可以通过引入jQuery UI或Bootstrap库来实现。jQuery UI的`dialog()`方法可以创建可自定义的对话框，而Bootstrap的`modal`组件则提供了...
2. **JavaScript（jQuery代码）**：实现提示框的动态显示和隐藏。通过绑定点击事件到特定按钮，当用户点击时，对应的提示框会显示出来。同时，插件可能还包含了动画效果，如滑动、淡入淡出等，以增加视觉吸引力。 3...
在“带提示音jQuery消息提示框”这个主题中，我们将深入探讨如何利用jQuery来创建具有声音反馈功能的通知或消息提示框。 首先，我们需要理解jQuery的核心概念。jQuery库通过提供一种简洁的语法，使得开发者可以更...
jQuery作为一款强大的JavaScript库，为开发者提供了丰富的工具和插件来实现各种样式和功能的消息提示框。本篇文章将围绕“多种风格jQuery网站消息提示框代码”这一主题，深入解析其核心知识点，帮助开发者更好地理解...
在Asp.net环境中，我们可以使用以下步骤来实现jQuery弹出提示框： 1. **引入jQuery库**：首先，在页面头部包含jQuery库的CDN链接或本地文件，如： ```html <script src="https://code.jquery....
jQuery Tipso是一款强大的消息提示框插件，它为网页开发者提供了简单而美观的方式来展示提示信息。这个插件基于流行的JavaScript库jQuery构建，旨在增强用户体验，通过动态效果和自定义样式来提升网页交互性。 ...
《使用jQuery实现仿QQ消息框的详细教程》 在网页开发中，为了提供更好的用户体验，开发者经常需要创建各种各样的提示、警告或消息框。QQ消息框因其简洁、易用和美观的特点，被广泛应用于各个网站。本教程将详细介绍...
这是一个jquery提示消息框，平时我们所做的Ajax操作，如果多次提交，效果看不出来，有了这个功能，使得有更好的用户体验，提示出来的信息，两秒后消失！该功能由本人实现，属于原创，所以多要了点分，也不为过
在本文中，我们将深入探讨如何使用jQuery来创建一个在屏幕右下角显示消息提示框的功能。这个功能允许用户设定消息自动隐藏的时间，并可设置周期性提醒，以提供一种高效的用户通知方式。我们将会分析实现这一功能的...
jQuery Tipso是一款强大的消息提示框插件，专为网页开发者设计，用于提供便捷的提示信息展示功能。在网页交互设计中，提示框是不可或缺的一部分，它能够帮助用户更好地理解和使用网站或应用程序。Tipso插件利用...
在本教程中，我们将探讨如何利用jQuery实现右下角的消息提示框功能，这在Web应用程序中非常常见，用于向用户显示通知、警告或确认信息。 首先，我们需要理解jQuery的核心概念。jQuery通过选择器来选取HTML元素，...
本篇文章将深入探讨如何使用jQuery实现各种消息提示框，以提供丰富的用户体验。 首先，"消息提示框"在Web界面设计中起着至关重要的作用，它们用于向用户展示通知、警告或确认信息。jQuery提供了多种方法来创建这些...
本主题将深入探讨如何基于jQuery实现一个消息提示框，并结合描述中的"鼠标悬停"和"失去焦点"事件进行讨论。 首先，jQuery的核心特性之一就是其强大的选择器系统，能够轻松地选取DOM元素。在创建消息提示框时，我们...
以下是一个简单的示例，展示如何使用jQuery实现非阻塞式消息提示框： ```html <!DOCTYPE html> 非阻塞式提示框 .custom-alert { position: fixed; z-index: 9999; width: 300px; padding: 20px; ...
【网页模板——基于jQuery Tipso插件实现消息提示框特效源码】 在网页设计与开发中，用户交互体验是至关重要的。为了提升用户体验，我们常常需要在用户操作后提供反馈，比如点击按钮后的提示信息、表单验证错误等。...
通过上述步骤，我们可以实现一个基本的jQuery右下角消息提示框。当然，实际项目中可能还需要考虑响应式设计、多语言支持、更好的动画效果等因素，这需要根据具体需求进行调整和优化。总之，jQuery提供了一个强大的...