弹框提示
jquery彈框提示框的實現。
原理分析
1.點擊按鈕出現彈框
2.設置彈框標題和內容
3.設置取消和確定兩個按鈕
4.點擊確定繼續執行
5.點擊取消返回此頁面
效果演示
原始樣式
點擊之后
點擊確認按鈕
代碼演示
在開始我們的程序之前注意：
引入Jquery.js架包
完整代碼展示
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)到此此彈框提示已經完整結束，趕快去練習吧。
掃一掃關注我的公眾號獲取更多資訊呦！！！
總結
- 上一篇： 设计一个具有大纯时延时间的一阶惯性环节的
- 下一篇： java - 水仙花数