怎么把web弹出框像alter()一样做在最顶层.

yiyishuitian 2015-11-18 01:51:25

应用环境:.net +jquery 微信公共号 web开发

有产品和产品子类两个dropdownlist 的下拉控件默认加入了 "请选择" 项 ,
当没有选择产品类而直接点击产品子类下拉项时,
弹出自定义的对话框"请选择产品类别!"

我的思路是产品子类下拉时加了click 事件进行判断,但是我弹出的对话框被档住了.请看图:
理想的应该是这样的:

但是实际做出来的效果是这样的:

如果是使用 alert() 函数是可以的,但是界面又不统一了,而且频繁弹出对话框时会有 "关闭网页的选项"

求解决方法,让我的弹出框像 alert() 的那样在最顶层显示 , 或者有其它的处理方式也行!!谢谢!!

...全文

625 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

yiyishuitian 2015-11-18

打赏
举报

问题解决,谢谢各位!尤其是 hch126163 ,正是他的这个思路,我想出了解决方法. 解决方法是下拉菜单是个click事件, 而且他的弹出框的等级应该是很高的,感觉只比alert低,比其它的都高. 但是我在他上面设置了一个 mousedown 事件,这样就在下拉菜单还没有执行的时候就把它给隐藏了. 谢谢hch126163!

yiyishuitian 2015-11-18

打赏
举报

引用 12 楼 some6one 的回复:

999可能是小了有次我设了9000 我以为够大了结果下层的竟然是9999...最好调试下看下具体值

弹窗用的是 99999 ,如果再设置 999999就不正常显示了.

yiyishuitian 2015-11-18

打赏
举报

引用 9 楼 hch126163 的回复:

弹出div 模拟窗口前隐藏页面 select 关闭弹出窗口后，显示页面 select

$('select').hide(); $('option').hide(); 都无法阻止, 下拉菜单的弹出,而且还是在最顶层.

some6one 2015-11-18

打赏
举报

999可能是小了有次我设了9000 我以为够大了结果下层的竟然是9999...最好调试下看下具体值

yiyishuitian 2015-11-18

打赏
举报

引用 7 楼 showbo 的回复:

请选择那个是系统的弹出层吧，和alert一样。你自定义的层应该无法设置在系统的上面，除非dl你改成第三方的插件，如easyui的combobox这种，而不是直接select

嗯,在微信里打开网页里是在最上层,应该是微信浏览器的机制, 如果单独在pc端查看网页的话,我的弹出框可以在最顶层.

erstens 2015-11-18

打赏
举报

直接用easyui

hch126163 2015-11-18

打赏
举报

弹出div 模拟窗口前隐藏页面 select 关闭弹出窗口后，显示页面 select

啾啾我 2015-11-18

打赏
举报

引用 3 楼 yiyishuitian 的回复:

[quote=引用 1 楼 jslang 的回复:] 弹出层的 z-index 设置的大一点

已经设置为 999了[/quote] 999太小了，设置再大点999999，或者你看你使用的是什么弹框插件，看看有没有相关的参数设置。

斯洛文尼亚旅游 2015-11-18

打赏
举报

请选择那个是系统的弹出层吧，和alert一样。你自定义的层应该无法设置在系统的上面，除非dl你改成第三方的插件，如easyui的combobox这种，而不是直接select

yiyishuitian 2015-11-18

打赏
举报

引用 4 楼 qq_19965967 的回复:

最好上代码，不然不知道你怎么写的呀，整个提示框是写在了html结构的最下面吗？

代码是网上copy的一个,具体如下:



//弹出窗口
(function () {
    $.MsgBox = {
        Alert: function (title, msg) {
            GenerateHtml("alert", title, msg);
            btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
            btnNo();
        },
        AlertSimple: function (msg) {
            GenerateHtmlSimple("alert", msg);
            btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
            btnNo();
        },
        Confirm: function (title, msg, callback) {
            GenerateHtml("confirm", title, msg);
            btnOk(callback);
            btnNo();
        },
        ConfirmSimple: function (msg, callback) {
            GenerateHtmlSimple("confirm", msg);
            btnOk(callback);
            btnNo();
        }
    }

    //生成Html
    var GenerateHtmlSimple = function (type, msg) {

        var _html = "";

        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">提示</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，再设置Css样式
        $("body").append(_html); GenerateCss();
    }

    //生成Html
    var 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，再设置Css样式
        $("body").append(_html); 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: '70%', 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' });


        //右上角关闭按钮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();
        });
    }
})();

yiyishuitian 2015-11-18