js中如何弹出一个可以输入多个信息的提示对话框

2020-08-20 国际 443阅读

思路:

如果要输入多个信息,那么原生的提示框肯定不符合要求,需要自己定义。

一般都是使用div层模拟提示框,这样就可以随便布局了。

代码示例:

1、定义CSS

        body {
            height: 100%;
            overflow: auto;
            margin: 0;
        }
        #test_Div {
            position: fixed;
            _position: absolute;
            top: 50%;
            left: 50%;
            border: 2px solid #C0C0C0;/*弹出框边框样式*/
            background-color: #FFFFFF;/*弹出框背景色*/
            display:none;
        }
        * html {
            overflow: hidden;
            position: absolute;
        }
    
2、简单点,引入JQuery
 
    
3、弹出层
        function show_Win(div_Win, tr_Title, event) {
            var s_Width = document.documentElement.scrollWidth; //滚动 宽度
            var s_Height = document.documentElement.scrollHeight; //滚动 高度
            var js_Title = $(document.getElementById(tr_Title)); //标题
            js_Title.css("cursor", "move");
            //创建遮罩层
            $("").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
            //获取弹出层
            var msgObj = $("#" + div_Win);
            msgObj.css('display', 'block'); //必须先弹出此行,否则msgObj[0].offsetHeight为0,因为"display":"none"时,offsetHeight无法取到数据;如果弹出框为table,则为'',如果为div,则为block,否则textbox长度无法充满td
            //y轴位置
            var js_Top = -parseInt(msgObj.height()) / 2 + "px";
            //x轴位置
            var js_Left = -parseInt(msgObj.width()) / 2 + "px";
            msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });
            //使弹出层可移动
            msgObj.draggable({ handle: js_Title, scroll: false });
        }
4、调用

        
            标题
            内容
        
声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com