弹出自定义输入框

来源：互联网发布：淘宝宝贝描述规则编辑：程序博客网时间：2024/05/20 05:45

在学校的时候最烦的就是JavaScript这门语言，学过C++和Java以后，对其语法是一点都不习惯。

在公司要做的一个项目中有自定义弹框的功能，本来我想的是页面用JavaScript写，然后功能都用Java来实现，就用Java做了一个弹框的功能，虽然对Java窗体不是很熟悉，但是还是能做出来，结果考虑到不能再IOS设备上使用，只好换成web版的弹框，用javaScript和H5来写，刚开始一点头绪都没有，还好有学这方面的同学。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css"> body,div,h2{margin:0;padding:0;}body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333;}.draga{position:absolute;top:100px;left:100px;width:400px;height:210px;background:#fff;border:1px solid #444;border-radius:5px;}.draga .title{position:relative;height:27px;margin:5px;}.draga .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}.draga .title div{position:absolute;height:19px;top:2px;right:0;}.draga .title a.min{background-position:-29px 0;}.draga .title a.min:hover{background-position:-29px -29px;}.draga .title a.max{background-position:-60px 0;}.draga .title a.max:hover{background-position:-60px -29px;}.draga .title a.revert{background-position:-149px 0;display:none;}.draga .title a.revert:hover{background-position:-149px -29px;}.draga .title a.close{background-position:-89px 0;}.draga .title a.close:hover{background-position:-89px -29px;}.draga .content{overflow:auto; margin:0 auto;margin:0 5px;}.xzm{width: 270px;margin: auto;}.content p{width: 100px;margin: auto;}.content .inp{width: 270px;margin: 10px auto;}.btn_div{width: 100px;margin: 0 auto;margin-top: 10px;}</style><script type="text/javascript"> /*-------------------------- + 获取id, class, tagName +-------------------------- */var get = {    byId: function(id) {        return typeof id === "string" ? document.getElementById(id) : id    },    byClass: function(sClass, oParent) {        var aClass = [];        var reClass = new RegExp("(^| )" + sClass + "( |$)");        var aElem = this.byTagName("*", oParent);        for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);        return aClass    },    byTagName: function(elem, obj) {        return (obj || document).getElementsByTagName(elem)    }};var dragMinWidth = 260;var dragMinHeight = 124;function drag(oDrag, handle){    var disX = dixY = 0;    var oMin = get.byClass("min", oDrag)[0];    var oMax = get.byClass("max", oDrag)[0];    var oClose = get.byClass("close", oDrag)[0];    handle = handle || oDrag;    handle.style.cursor = "move";    //最大化按钮    oMax.onclick = function ()    {        oDrag.style.top = oDrag.style.left = 0;        oDrag.style.width = document.documentElement.clientWidth - 2 + "px";        oDrag.style.height = document.documentElement.clientHeight - 2 + "px";        this.style.display = "none";        oRevert.style.display = "block";    };    //最小化按钮    oMin.onclick = oClose.onclick = function ()    {        oDrag.style.display = "none";        var oA = document.createElement("a");        oA.className = "open";        oA.href = "javascript:;";        oA.title = "还原";        document.body.appendChild(oA);        oA.onclick = function ()        {            oDrag.style.display = "block";            document.body.removeChild(this);            this.onclick = null;        };    };    //阻止冒泡    oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function (event)    {        this.onfocus = function () {this.blur()};        (event || window.event).cancelBubble = true        };}window.onload = window.onresize = function (){    var oDrag = document.getElementById("drag");    var oTitle = get.byClass("title", oDrag)[0];    drag(oDrag, oTitle);    oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";//左右居中    oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";//上下居中}</script></head><body><button id="btn">确定</button><div id="drag" class="draga" style="display: none;">  <div class="title">    <h2>下载密码</h2>    <div>      <a class="min" href="javascript:;" title="最小化"><img src="images/x.png"></a>      <a class="max" href="javascript:;" title="最大化"><img src="images/d.png"></a>      <a class="close" href="javascript:;" title="关闭"><img src="images/g.png"></a>    </div>  </div>  <div class="content">  <div class="xzm">    <p>输入下载密码</p>    <input type="text" class="inp" id="inp"></input>   </div>   <div class="btn_div">   <button id="ok">确定</button>   <button id="no">取消</button>   </div>  </div></div><div id="dragb" class="draga" style="display: none;">  <div class="title">    <h2>下载密码</h2>    <div>      <a class="min" href="javascript:;" title="最小化"><img src="images/x.png"></a>      <a class="max" href="javascript:;" title="最大化"><img src="images/d.png"></a>      <a class="close" href="javascript:;" title="关闭"><img src="images/g.png"></a>    </div>  </div>  <div class="content">  <div class="xzm">    <p>输入下载密码</p>    <input type="text" class="inp" id="inpa"></input>    <p>再次输入下载密码</p>    <input type="text" class="inp" id="inpc"></input>   </div>   <div class="btn_div">   <button id="oka"><a href="javascript:;" id="okc">确定</a></button>   <button id="noa">取消</button>   </div>  </div></div><script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn").click(function(){$("#btn").css("display","none");  $("#drag").css("display","block");});$("#ok").click(function(){if ($("#inp").val()==1234) {$("#btn").css("display","none");  $("#drag").css("display","none");  $("#dragb").css("display","block");  }  else{  alert("下载码错误");  }});$("#oka").click(function(){if ($("#inpa").val()==$("#inpc").val()) {$("#dragb").css("display","none");$("#okc").attr("download","百度图片");$("#okc").attr("href","https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png");  }  else{  alert("错误");  }});});</script></body></html>

运行效果如下：

进行判断之后开始下载，不同的浏览器效果不同，谷歌和IE浏览器会下载到默认路径，360浏览器会弹出一个下载框，供用户选择下载路径和文件名，如下图：

4 0