當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js+jquery手写弹出提示框

發(fā)布時(shí)間：2025/3/17 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 js+jquery手写弹出提示框小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery彈出框-jq22.com</title> <script src="jquery-1.11.3.js"></script> <style> </style> </head> <body> <input id="add" type="button" value="添加">  <input id="update" type="button" value="修改"><script> $("#add").bind("click", function() {$.MsgBox.Alert("消息", "哈哈，添加成功！"); });//回調(diào)函數(shù)可以直接寫方法function(){} /*$("#delete").bind("click", function () {$.MsgBox.Confirm("溫馨提示", "執(zhí)行刪除后將無法恢復(fù)，確定繼續(xù)嗎？溫馨提示", function () { alert("你居然真的刪除了..."); }); });*/ function test() {alert("你點(diǎn)擊了確定,重新進(jìn)行認(rèn)證"); } //也可以傳方法名 test $("#update").bind("click", function() {$.MsgBox.Confirm("溫馨提示", "確定要進(jìn)行修改嗎？", test); }); //當(dāng)然你也可以不給回調(diào)函數(shù),點(diǎn)擊確定后什么也不做，只是關(guān)閉彈出層//$("#update").bind("click", function () { $.MsgBox.Confirm("溫馨提示", "確定要進(jìn)行修改嗎？"); }); (function() {$.MsgBox = {Alert: function(title, msg) {GenerateHtml("alert", title, msg);btnOk(); //alert只是彈出消息，因此沒必要用到回調(diào)函數(shù)callback btnNo();},Confirm: function(title, msg, callback) {GenerateHtml("confirm", title, msg);btnOk(callback);btnNo();}}//生成Htmlvar GenerateHtml = function(type, title, msg) {var _html = "";_html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';_html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';if (type == "alert") {_html += '<input id="mb_btn_ok" type="button" value="確定" />';}if (type == "confirm") {_html += '<input id="mb_btn_ok" type="button" value="確定" />';_html += '<input id="mb_btn_no" type="button" value="取消" />';}_html += '</div></div>';//必須先將_html添加到body，再設(shè)置Css樣式 $("body").append(_html);//生成Css GenerateCss();}//生成Cssvar GenerateCss = function() {$("#mb_box").css({width: '100%',height: '100%',zIndex: '99999',position: 'fixed',filter: 'Alpha(opacity=60)',backgroundColor: 'black',top: '0',left: '0',opacity: '0.6'});$("#mb_con").css({zIndex: '999999',width: '400px',position: 'fixed',backgroundColor: 'White',borderRadius: '15px'});$("#mb_tit").css({display: 'block',fontSize: '14px',color: '#444',padding: '10px 15px',backgroundColor: '#DDD',borderRadius: '15px 15px 0 0',borderBottom: '3px solid #009BFE',fontWeight: 'bold'});$("#mb_msg").css({padding: '20px',lineHeight: '20px',borderBottom: '1px dashed #DDD',fontSize: '13px'});$("#mb_ico").css({display: 'block',position: 'absolute',right: '10px',top: '9px',border: '1px solid Gray',width: '18px',height: '18px',textAlign: 'center',lineHeight: '16px',cursor: 'pointer',borderRadius: '12px',fontFamily: '微軟雅黑'});$("#mb_btnbox").css({margin: '15px 0 10px 0',textAlign: 'center'});$("#mb_btn_ok,#mb_btn_no").css({width: '85px',height: '30px',color: 'white',border: 'none'});$("#mb_btn_ok").css({backgroundColor: '#168bbb'});$("#mb_btn_no").css({backgroundColor: 'gray',marginLeft: '20px'});//右上角關(guān)閉按鈕hover樣式 $("#mb_ico").hover(function() {$(this).css({backgroundColor: 'Red',color: 'White'});}, function() {$(this).css({backgroundColor: '#DDD',color: 'black'});});var _widht = document.documentElement.clientWidth; //屏幕寬var _height = document.documentElement.clientHeight; //屏幕高var boxWidth = $("#mb_con").width();var boxHeight = $("#mb_con").height();//讓提示框居中 $("#mb_con").css({top: (_height - boxHeight) / 2 + "px",left: (_widht - boxWidth) / 2 + "px"});}//確定按鈕事件var btnOk = function(callback) {$("#mb_btn_ok").click(function() {$("#mb_box,#mb_con").remove();if (typeof(callback) == 'function') {callback();}});}//取消按鈕事件var btnNo = function() {$("#mb_btn_no,#mb_ico").click(function() {$("#mb_box,#mb_con").remove();});} })(); </script></body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/weiyf/p/8554729.html

總結(jié)

以上是生活随笔為你收集整理的js+jquery手写弹出提示框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。