越秀企业网站建设,海南房产,网址导航是什么浏览器,做彩票的网站有哪些jquery弹框提示框的实现。
原理分析 1.点击按钮出现弹框 2.设置弹框标题和内容 3.设置取消和确定两个按钮 4.点击确定继续执行 5.点击取消返回此页面
效果演示
原始样式 点击之后 点击确认按钮
代码演示
在开始我们的程序之前注意#xff1a; 引入Jquery.js架包
…jquery弹框提示框的实现。
原理分析 1.点击按钮出现弹框 2.设置弹框标题和内容 3.设置取消和确定两个按钮 4.点击确定继续执行 5.点击取消返回此页面
效果演示
原始样式 点击之后 点击确认按钮
代码演示
在开始我们的程序之前注意 引入Jquery.js架包
script typetext/javascript srcjs/jquery.js/script完整代码展示
html页面
!DOCTYPE html
html
head
meta charsetUTF-8
titlejQuery弹框/titlelink relstylesheet hrefcss/tankuang.css /script typetext/javascript srcjs/jquery.js/script
script typetext/javascript srcjs/tankuang.js /script/head
body
center
button onClick$.myConfirm({title:提示框标题,message:提示框内容,callback:function(){alert(true)}})点击跳出弹框/buttonbr/br/
/center/body
/htmlcss样式
* {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 classmyModadiv classmyAlertBox stylemargin-top: top pxh6 option.title /h6p option.message /pdiv classcol2div classcol stylemargin-right: 20px;div classbtn exit取消/div/divdiv classcoldiv classbtn sure确定/div/div/div/div/div);$(.btn.exit).click(function() {$(.myModa).remove();})$(.btn.sure).click(function() {$(.myModa).remove();option.callback();})}});
})(jQuery)
到此此弹框提示已经完整结束赶快去练习吧。
扫一扫关注我的公众号获取更多资讯呦
