通过纯JS和css实现自定义弹出对话框

需求:

实现通过一个弹出对话框来选择下拉列表中对应值进行参数设置操作,及弹出对话框中需要有一个下拉列表输入和一个确定按钮即可,要求弹出对话框后,背部界面不能够操作或者被屏蔽灰掉。

思路:

1.开始以为so so much simple,毫不犹豫考虑prompt弹出对话框,结果发现prompt只能进行简单的文本输入操作,不能进行下拉列表选择输入操作,于是放弃。

2.很多BS模式系统中弹出对话框下拉列表是怎么实现的呢?因为他们可以使用强大的js库,如jquery,ext等等js库中有现成的对话框,功能超级强大哦,但是项目属于嵌入式项目,代码空间如城市里的地盘寸土寸金啊,不能为了一个小小需求而牺牲如此的代码空间去存放js库了,也就不能再考虑下去。

3.继续求助度娘,个人认为度娘在解决web前端问题方面还是很有实力的。发现了一种通用的解决方式,涉及到遮罩层、弹出层等等理论,就不赘述了,直接上解决方案吧。

解决方案:

关键js代码如下,

function createPrompt()
{
    var divSp = document.createElement("div");    //弹出对话框
    var newMask = document.createElement("div");  //遮罩层,用来屏蔽灰掉背部界面
    var btnSub = document.createElement("input"); // 弹出对话框中按钮
    var inner;

    // 弹出对话框中要呈现的页面元素布局等html代码
    inner = '<div class="fieldset" style="height:300px  background:#A9A9A9">';
    inner += ' <div class="fs-heading" style="background:#D2691E">';
    inner += ' <h2>Please set the Time zone when you first login !</h2>';
    inner += ' </div>';
    inner += ' <ul class="fs-fieldgroup">';
    inner += ' <li>';
    inner += ' <label style="font-size:14px">Time zone :</label>';
    inner += ' <select name="cboTimeZone" size="1" style="width:430px">';
    for( var i = 0; i < timeZones.length; i++ )
    {
        if(i == 67) // default for (GMT+10:00)
        {
            inner += ' <option value=' + getTimeZoneOffset(i)+ ' selected="selected">' + timeZones[i] + '</option>';
        }
        else
        {
            inner += ' <option value=' + getTimeZoneOffset(i)+ '>' + timeZones[i] + '</option>';
        }
    }
    inner += ' </select>';
    inner += ' </li>';
    inner += ' </ul>';
    inner += '</div>';

    // 创建弹出层 遮罩层 等
    if ( !document.getElementById("mask") && 1)
    {      
        //mask div    
        newMask.id = "mask";
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        newMask.style.width = "100%";
        newMask.style.height = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) + 100 + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "gray";
        newMask.style.filter = "alpha(opacity=80)";
        newMask.style.opacity = "0.5";
        document.body.appendChild(newMask);      
    }
     
    if ( !document.getElementById("promptID"))
    {
        //new div (prompt)
        divSp.setAttribute("id", "promptID");
        divSp.style.position = "absolute";
        divSp.style.padding = "8px";
        divSp.style.width = "10px";
        divSp.style.height = "10px";
        divSp.style.zIndex = "5000";
        divSp.style.top = parseInt(window.screen.height * 0.21)+document.body.scrollTop+document.documentElement.scrollTop + 30 + "px";
        divSp.style.left = parseInt(document.body.offsetWidth * 0.31)+document.body.scrollLeft+document.documentElement.scrollLeft + "px";
        divSp.style.border = "1px dotted #576999";
        divSp.style.backgroundColor = "#E4E7EF";
        divSp.innerHTML = inner;
        document.body.appendChild(divSp);
        openDiv();
    }
    //it can be operated in android
    if (merfound != 1)
    {
    document.getElementsByName("adsl_username")[0].disabled = "disabled";
    document.getElementsByName("adsl_pwd")[0].disabled = "disabled";
    }

    if ( !document.getElementById("btnSubID"))
    {
        btnSub.setAttribute("id", "btnSubID");
        btnSub.setAttribute("class", "btn-subtle");
        btnSub.type = "button";
        btnSub.style.width = "100px";
        btnSub.style.position = "absolute";
        btnSub.style.top = "80%";
        btnSub.style.left = "40%";
        btnSub.value = "Save ";
        btnSub.onclick = function(){
          setTimeZone();
          setTimeout("restore()", 6000);    
          btnSub.setAttribute("class", "delClass");
          document.getElementById("btnSubID").disabled = "disabled";
        };
        document.getElementById("promptID").appendChild(btnSub);
    }    
}

// 调整弹出对话框宽度和高度
function openDiv()
{
    var divPrompt = document.getElementById("promptID");
    
    var viewWidth = parseInt(document.body.offsetWidth * 0.37);
    var viewHeight = parseInt(window.screen.height  * 0.18);

    if (viewWidth < 460 || viewWidth > 500)
    {
        viewWidth = 470;
    }
 
    if (viewHeight < 180 || viewHeight > 240)
    {
        viewHeight = 190;
    }

    divPrompt.style.width=viewWidth + "px";  
    divPrompt.style.height=viewHeight + "px";
}

在需要弹出对话框的地方直接调用createPrompt()即可。

发布了42 篇原创文章 · 获赞 24 · 访问量 55万+
展开阅读全文

用js自定义一个对话框,怎么把对话框中录入的数据读取显式到页面上?各位大神帮帮忙啊

07-29

![图片说明](https://img-ask.csdn.net/upload/201707/29/1501294604_564573.jpg) 部分代码 function Inquiry_event() { var str = "<div style='border-top:3px solid #D4D4D4;'><table id='tablee' style='margin:0 auto; width:350px; height:400px;min-width: 310px;min-height: 410px;max-width:310px;max-width: 410px;'>"; str+="<tr><td>" + addCheckbox('账号:<p><input type="text" name="zhanghao" id="zhanghao" class="auth" maxlength="15" placeholder="请输入账号" onblur="zhanghao()"></p>') + "</td><td>" + addCheckbox('名称:<p><input type="text" name="username" id="username" class="auth" maxlength="15" placeholder="请输入名称" onblur="username()"></p>') + "</td></tr>"; str+="<tr><td>" + addCheckbox('密码:<p><input type="password" name="mima" id="mima" class="auth" maxlength="6" placeholder="请输入密码" onblur="mima()"></p>') + "</td><td>" + addCheckbox('确认密码:<p><input type="password" name="quemi" id="quemi" class="auth" maxlength="6"placeholder="请确认密码" onblur="quemi()"></p>') + "</td></tr>"; str += "<tr><td>" + addCheckbox('邮箱:<p><input type="email" name="youxiang" id="youxiang" class="auth" maxlength="50" placeholder="格式aaa@aa.com" onblur="youxiang()"></p>') + "</td><td>" + addCheckbox('手机号:<p><input type="text" name="shouji" id="shouji" class="auth" maxlength="11" placeholder="格式187********" onblur="shouji()"></p>') + "</td></tr>"; str+="<tr><td>" + addCheckbox('类型:<p><select name="city"style="float: inherit;width: 110px;" placeholder="请选择" onblur="city()"><option value="管理员" >管理员</option><option value="操作员" >操作员</option><option value="用户" >用户</option></select></p>') + "</td></tr>"; str += "</table></div>"; showWindow('新增用户',str,550,500,true,['提交',fun1,'取消',btn2]); } 点击提交时,页面怎么获取对话框中录入的数据?显示在网页上 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览