<!doctype html>
<!--<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。-->
<html>
    <head>
        <!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="引入jquery "></script><!--引入的js  src是引入的js样式路径-->
        <link rel="stylesheet" href="" /><!--引入的css页面的样式 href是引入的css样式路径-->
        <!--当前页面的三要素-->
        <title>html模板</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">

        <!--css,js-->
        <style type="text/css">
            *{margin:0;padding:0}
            body{font-family:"微软雅黑";}
            /*弹出框*/
            #login {width:600px;height:350px;background:#b30;box-shadow:0 0 10px #000;z-index:10;position:absolute;display:none;}
            #login #title{background:#FF8502;width:100%;height:50px;font-size:18px;line-height:50px;text-align:left;text-indent:2em;cursor:move;}
            #login #title a{text-decoration:none;display:block;float:right;
            margin-right:16px;}
            #login #title a:hover{color:#F08}
            #content{width:305px;height:175px;margin:50px auto;font-size:16px;}
            p{text-indent:0em;}
            #content p input{height:35px;width:260px;margin-left:6px;border-radius:4px;text-indent:0em;}
            #content .con input{width:10px;height:10px;margin-left: 40px;}
            #content .con a{text-decoration:none;display:block;float:right;
            margin-right:16px;color:#fff;}
            #content .wfsubmit input{margin-left:40px;border:1px solid #46A91C ;background:#46A91C;color:#fff;}
            
            /*遮罩*/
            #bg{background:#444;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.6;display:none;}
        </style>
    </head>
<body>
<div id="login">
    <div id="title">用户登录 <a href="#" class="tcclose">✘</a></div>
    <form action="" method="post">
    <div id="content">
        <p>账号<input type="text"/></p>
        <br>
        <p>密码<input type="text"/></p>
        <br>
        <p class="con"><input type="checkbox">下次自动登录 <a href="#">忘记密码</a></p>
        <br>
        <p class="wfsubmit"><input type="button" value="立即登录"/></p>
    </div>
</div>
<div id="bg"></div>
<input type="button" onclick="wf_tcdelog()" value="弹窗"/>
<script type="text/javascript">
function wf_tcdelog(){
        $("#login").show();
        $("#bg").show();
        var _left =($(window).width()-$("#login").width())/2;//获取左边距离
        var _top =($(window).height()-$("#login").height())/2-50;//获取左边距离
        $("#login").css({left:_left,top:_top});
}
//当浏览器进行改变的时候触发的事件
$(window).resize(function(){
        wf_tcdelog();
});

//关闭窗口
$(".tcclose").click(function(){
        $("#login").hide();
        $("#bg").hide();
});


//拖拽方法。
window.onload=function(){
    init(document.getElementById("title"));
}
var l = 0,t=0,x=0,y=0;
var isOver = false;
var zindex = 999;
function init(titleDom){
    //tm_center(divObj);//居中事件
    /*第一种*/
    var thisDom = titleDom;//获取当前title对象
    var parentDom = thisDom.parentNode;//获取当前title对应的div
    titleDom.onmousedown = function(event){//1111开始
        var e = event || window.event;//为了兼容ie和火狐
        x = e.clientX;//鼠标所在的x坐标
        y = e.clientY;//鼠标所在的y坐标
        l = parseInt(parentDom.style.left);//距离浏览器左边的位置left
        t = parseInt(parentDom.style.top);//距离浏览器顶部的位置top
        isOver = true;//定义拖动标识,防止卡顿
        zindex++;
        parentDom.style.zIndex = zindex;
        document.onmousemove = function(event){
            if(isOver){
                var e = event || window.event;//为了兼容ie和火狐
                var newLeft = l + e.clientX - x;//新的左边距
                var newTop = t + e.clientY - y;//新的顶部边距
                parentDom.style.left = newLeft+"px";
                parentDom.style.top = newTop+"px";
            }
        }; //鼠标移动的事件
        document.onmouseup = function(event){
            if(isOver){
                isOver = false;//还原标识
            }
        };//鼠标松开的事件

    };///结束
};
</script>
</body>
</html>

注意:使用的时候导入jquery

posted on 2016-08-17 11:48  代码颠覆  阅读(172)  评论(0编辑  收藏  举报