當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

弹框提示

發布時間：2025/3/12 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了弹框提示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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內容