弹框提示

jquery弹框提示框的实现。

原理分析
1.点击按钮出现弹框
2.设置弹框标题和内容
3.设置取消和确定两个按钮
4.点击确定继续执行
5.点击取消返回此页面

效果演示

原始样式
在这里插入图片描述
点击之后

点击确认按钮

代码演示

在开始我们的程序之前注意：
引入Jquery.js架包

<script type="text/javascript" src="js/jquery.js"></script>

完整代码展示

html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery弹框</title><link rel="stylesheet" href="css/tankuang.css" /><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tankuang.js" ></script></head>
<body>
<center>
<button onClick="$.myConfirm({title:'提示框标题',message:'提示框内容',callback:function(){alert('true')}})">点击跳出弹框</button><br/><br/>
</center></body>
</html>

css样式

* {margin: 0;padding: 0;
}
button{width: 100px;height: 30px;border: 1px solid cyan;margin-top: 100px;border-radius: 10px;
}.clearfix:after {content: '';display: table;width: 100%;clear: both;
}.myModa {position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.2);
}.myModa .myAlertBox {width: 300px;border-radius: 5px;border: 1px solid #d9d9d9;background: #CAE3FF;overflow: hidden;margin: 0 auto;
}.myModa .myAlertBox h6 {background: #EEEBEB;padding: 10px;line-height: 20px;font-size: 17px;text-align: center;
}.myModa .myAlertBox p {padding: 20px;line-height: 26px;font-size: 16px;color: #FF4783;
}.myModa .myAlertBox .btn {cursor: pointer;width: 80px;line-height: 36px;border-radius: 5px;text-align: center;font-size: 16px;margin: 0 auto;margin-bottom: 20px;background: #CAA2EC;
}
.myModa .myAlertBox .btn:hover{background-color: #A032CF;
}.myModa .myAlertBox .col2 .col {width: 100px;float: left;
}.myModa .myAlertBox .col2 .col .btn {width: 100%;
}.myModa .myAlertBox .col2 {padding: 0 40px;
}

script内容

(function() {$.extend({myConfirm: function(options) {var option = {title: "标题",message: "内容",callback: function() {}}if (typeof(options) == "string") {option.message = options} else {option = $.extend(option, options);}var top = $(window).height() * 0.3;$('body').append('<div class="myModa"><div class="myAlertBox" style="margin-top:' + top + 'px"><h6>' + option.title +'</h6><p>' + option.message +'</p><div class="col2"><div class="col" style="margin-right: 20px;"><div class="btn exit">取消</div></div><div class="col"><div class="btn sure">确定</div></div></div></div></div>');$('.btn.exit').click(function() {$('.myModa').remove();})$('.btn.sure').click(function() {$('.myModa').remove();option.callback();})}});
})(jQuery)