弹出对话框点击确定按钮,并实现页面跳转。
工具/原料
引用jquery.js
方法/步骤
1
1.在html 页面引入 jQuery.js
2
2.把以下代码封装成js文件,并在页面中引入(function () { $.MsgBox = { Confirm: function (title, msg, callback) { GenerateHtml('confirm', title, msg); btnOk(callback); btnNo(); } } //生成Html var GenerateHtml = function (type, title, msg) { var _html = ''; _html += '
' + title + ''; _html += 'x
'; //必须先将_html添加到body,再设置Css样式 $('body').append(_html); //生成Css GenerateCss(); } //生成Css var 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: '1px solid #D0EEFF', 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: 'black', border: 'none' }); $('#mb_btn_ok').css({ backgroundColor: '#D0EEFF' }); $('#mb_btn_no').css({ backgroundColor: '#ddd', marginLeft: '20px' }); //右上角关闭按钮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(); }); } })();' + msg + '
'; if (type == 'alert') { _html += ''; } if (type == 'confirm') { _html += ''; _html += ''; } _html += '
3
在页面中调用 $.MsgBox.Confirm('温馨提示', obj.msg, function () { window.location.href = '跳转网页地址'; });//执行函数