多语言展示
当前在线:571今日阅读:19今日分享:20

jquery创建弹出对话框并跳转页面

弹出对话框点击确定按钮,并实现页面跳转。
工具/原料

引用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
' + msg + '
';                if (type == 'alert') {                    _html += '';                }                if (type == 'confirm') {                    _html += '';                    _html += '';                }                _html += '
';                //必须先将_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();                });            }        })();

3

在页面中调用     $.MsgBox.Confirm('温馨提示', obj.msg, function () {             window.location.href = '跳转网页地址';     });//执行函数

推荐信息