弹出自定义输入框

在学校的时候最烦的就是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 5fae8f6f96c59ed1;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浏览器会弹出一个下载框,供用户选择下载路径和文件名,如下图:


IT文库 » 弹出自定义输入框
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址