jQuery 原位确认框

17 Mar 2025 | 6 分钟阅读

在本文中，我们将了解使用 jQuery 的原地确认框。当您希望用户验证或接受某些内容时，会使用确认框。当弹出确认框时，用户必须单击“确定”按钮或“取消”按钮才能继续。如果用户单击“确定”按钮，则表示框正确，否则框返回不正确。

以下是 jQuery 原地确认框的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  CSS jQuery on-place Confirm Boxes </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4d4f4;
  margin: 0;
  padding: 0;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
h3 {
  font-family: inherit;
  font-weight: 900; 
  color: black;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.5em;
}
h2 {
  font-family: inherit;
  font-weight: 800; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.2em;
}
* {
  box-sizing: border-box;
}
#page {
	width: 660px;
	margin: 140px auto 60px;
	margin: 225px auto 60px;
}
.item {
	width: 500px;
  height: 200px;
  background: #888;
	padding-bottom: 6px;
	display: inline-block;
	margin-bottom: 30px;
	position: relative;
}
.item .delete {
	background: url('https://i.imgur.com/e8sEEB0.png') no-repeat;
	width: 37px;
	height: 38px;
	position: absolute;
	cursor: pointer;
	top: 10px;
	right: -80px
}
.item a {
	background-color: #FAFAFA;
	border: none;
	display: block;
	padding: 10px;
	text-decoration: none;
}
.item a img {
	display: block;
	border: none;
}
#confirmOverlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background:url('http://demo.tutorialzine.com/2010/12/better-confirm-box-jquery-css3/jquery.confirm/ie.png');
	background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
	z-index: 100000;
z-index: 1040;
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
#confirmBox {
	background: #FFF;
	width: 460px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -130px 0 0 -230px;
	border: 1px solid rgba(33, 33, 33, 0.6);
		-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
	box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}
#confirmBox h1{
	font: 26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	padding: 18px 25px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	color: #666;
}
#confirmBox p {
	font: 26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	padding: 18px 25px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	color: #666;
}
#confirmBox h1 {
	letter-spacing: 0.3px;
	color: #888;
}
#confirmBox p {
	background: none;
	font-size: 16px;
	line-height: 1.4;
	padding-top: 35px;
}
#confirmButtons {
	padding: 15px 0 25px;
	text-align: center;
}
#confirmBox .button {
	display: inline-block;
	background: #0E8DCE;
	color: white;
	position: relative;
	height: 33px;
	font: 17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	margin-right: 15px;
	padding: 0 35px 0 40px;
	text-decoration: none;
	border: none;
}
#confirmBox .button:last-child { margin-right: 0; }
#confirmBox .button span {
	position: absolute;
	top: 0;
	right: -5px;
	background: #0E8DCE;
	width: 5px;
	height: 33px
}
#confirmBox .blue { background-position: left top;
text-shadow: 1px 1px 0 #5889a2; }
#confirmBox .blue span { background-position: -195px 0; }
#confirmBox .blue:hover {	 
background-position: left bottom; }
#confirmBox .blue:hover span { 
background-position: -195px bottom; }
#confirmBox .gray { 
background-position: -200px top;
text-shadow: 1px 1px 0 #707070; }
#confirmBox .gray span { 
background-position: -395px 0; }
#confirmBox .gray:hover {		
background-position: -200px bottom; }
#confirmBox .gray:hover span {	
background-position: -395px bottom; }
</style>
<body>
<div id = "page">
<div id="page">
  <h2> Example </h2>
  <h3> jQuery On-place Confirmation Dialog Window </h3>
	<div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
          <div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
          <div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
<div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>
        <div class = "item">
            <div class = "delete"> </div>
        </div>                 
</div>
<script>
(function($) {
	$.confirm = function(params) {
		if($('#confirmOverlay').length) {
						return false;
		}
		var buttonHTML = ' ';
		$.each(params.buttons,function(name,obj) {	
			buttonHTML += '<a href = "#" class="button '+obj['class']+'">'+name+'<span> </span> </a>';
			if(!obj.action){
				obj.action = function() {};
			}
		});
		var markup = [
			'<div id = "confirmOverlay">',
			'<div id = "confirmBox">',
			'<h1>',params.title,'</h1>',
			'<p>',params.message,'</p>',
			'<div id = "confirmButtons">',
			buttonHTML,
			'</div> </div> </div>'
		].join('');
		$(markup).hide().appendTo('body').fadeIn();
		var buttons = $('#confirmBox .button'),
			i = 0;
		$.each(params.buttons,function(name,obj) {
			buttons.eq(i++).click(function() {		
				obj.action();
				$.confirm.hide();
				return false;
			});
		});
	}
	$.confirm.hide = function() {
		$('#confirmOverlay').fadeOut(function() {
			$(this).remove();
		});
	}
})(jQuery);
$(document).ready(function(){
	$('.item .delete').click(function(){
		var elem = $(this).closest('.item');
		$.confirm({
			'title'		: 'Delete Confirmation',
			'message'	: 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
			'buttons'	: {
				'Yes'	: {
					'class'	: 'blue',
					'action': function(){
						elem.slideUp();
					}
				},
				'No'	: {
					'class'	: 'gray',
					'action': function(){}	https://codepen.io/jasondavis/pen/LYoZPJ
				}
			}
		});	
	});	
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个原地确认对话框的示例。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jquery on-place confirm boxes </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
* {
  box-sizing: border-box;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
h1 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
body {
    font-family: sans-serif
}
.dialog-ovelay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 999999
}
.dialog-ovelay .dialog {
    width: 400px;
    margin: 100px auto 0;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    border-radius: 3px;
    overflow: hidden
}
.dialog-ovelay .dialog header {
    padding: 10px 8px;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5
}
.dialog-ovelay .dialog header h3 {
    font-size: 14px;
    margin: 0;
    color: #555;
    display: inline-block
}
.dialog-ovelay .dialog header .fa-close {
    float: right;
    color: #c4c5c7;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 2px;
    border-radius: 1px    
}
.dialog-ovelay .dialog header .fa-close:hover {
    color: #b9b9b9
}
.dialog-ovelay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #673AB7;
    color: #a2a2a2
}
.dialog-ovelay .dialog .dialog-msg {
    padding: 12px 10px
}
.dialog-ovelay .dialog .dialog-msg p{
    margin: 0;
    font-size: 15px;
    color: #333
}
.dialog-ovelay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 8px 10px
}
.dialog-ovelay .dialog footer .controls {
    direction: rtl
}
.dialog-ovelay .dialog footer .controls .button {
    padding: 5px 15px;
    border-radius: 3px
}
.button {
  cursor: pointer
}
.button-default {
    background-color: rgb(248, 248, 248);
    border: 1px solid rgba(204, 204, 204, 0.5);
    color: #5D5D5D;
}
.button-danger {
    background-color: #f44336;
    border: 1px solid #d32f2f;
    color: #f5f5f5
}
.link {
  padding: 5px 10px;
  cursor: pointer
}
</style>
<body>
<h1> Example </h1>
<h3> Jquery on-Place Confirm Boxes </h3>
<a> <button class = "button-default link"> WELCOME TO JAVATPOINT </button> </a> 
<script>
function Confirm(title, msg, $true, $false, $link) {
        var $content =  "<div class='dialog-ovelay'>" +
                        "<div class='dialog'> <header>" +
                         " <h3> " + title + " </h3> " +
                         "<i class='fa fa-close'></i>" +
                     "</header>" +
                     "<div class='dialog-msg'>" +
                         " <p> " + msg + " </p> " +
                     "</div>" +
                     "<footer>" +
                         "<div class='controls'>" +
                             " <button class='button button-danger doAction'>" + $true + "</button> " +
                             " <button class='button button-default cancelAction'>" + $false + "</button> " +
                         "</div>" +
                     "</footer>" +
                  "</div>" +
                "</div>";
         $('body').prepend($content);
      $('.doAction').click(function () {
        window.open($link, "_blank"); 
        $(this).parents('.dialog-ovelay').fadeOut(500, function () {
          $(this).remove();
        });
      });
$('.cancelAction, .fa-close').click(function () {
        $(this).parents('.dialog-ovelay').fadeOut(500, function () {
          $(this).remove();
        });
      });      
   }
$('a').click(function () {
        Confirm('Go to javatpoint', 'Are you sure you want to visit Javatpoint', 'Yes', 'Cancel', "https://tpointtech.cn"); 
    });
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 创建了一个原地确认对话框的示例。

输出

以下是这个例子的输出。

下一主题使用 jQuery 的带拖放和滚轮的旋转木马

jQuery 原位确认框

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 原位确认框

示例 1

示例 2

相关帖子

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

JQuery 产品导览

JQuery 打字机

JQuery Blockrain/俄罗斯方块游戏

jQuery 过滤表格

使用 jQuery 上传带有进度条的图像

使用 Jquery 的日夜切换

jQuery 动画边框插件

Jquery 粘性标题

使用 HTML 和 jQuery 的电话号码键盘

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器