原生JS可拖动弹窗效果实例代码


Posted in Javascript onNovember 09, 2013

这个代码不是我原创的,只是最近想学自己做一个很漂亮的弹窗,自己本来是不会怎么写的,所以上网去找了下,感觉这个不错,很简单,很实用,入门很棒。我就改了下,使逻辑性和可读性更好。

原作者已不可考。感谢原作者,阿门。

 

原生JS可拖动弹窗效果实例代码

原生JS可拖动弹窗效果实例代码

<html>
    <head>
        <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
        <meta name="author" content="www.newxing.com" />
        <meta name="author email" content="123@linhaibo.com" />
        <title>弹出窗口登录效果</title>
        <style>
   body,#Mdown {
    margin: 0;
    padding: 0;
    text-align: center;
    font: normal 14px/180% Tahoma,sans-serif;
   }
   #loginBox {
    margin: 0 auto;
    padding: 0px;
    text-align: left;
    width: 280px;
    height: 150px;
    background: #EAEEFF;
    font-size: 9pt;
    border: 1px solid #829AFF;
    overflow: hidden;
    filter: alpha(opacity=90);
    opacity: 1;
   }
   #loginBox .title {
    text-align: left;
    padding-left: 10px;
    font-size: 11pt;
    border-bottom: 1px solid #829AFF;
    height: 25px;
    line-height: 25px;
    cursor: move;
   }
   #loginBox .t1 {
    float: left;
    font-weight: bold;
    color: #AA7B7B;
    text-decoration: none;
   }
   #loginBox .t2 {
    float: right;
    text-align: center;
    line-height: 18px;
    height: 18px;
    width: 18px;
    margin-top: 3px;
    margin-right: 2px;
    overflow: hidden;
    border: 1px solid #FF5889;
    background: #FFE0E9;
    cursor: pointer;
   }
   #loginBox .login {
    text-align: center;
    width: 100%;
    height: 100%;
   }
   input.submit {
    float: right;
    border: 1px solid #829AFF;
    FONT-SIZE: 9px;
    background: #EAEEFF;
    HEIGHT: 20px;
    margin-top: 5px;
    margin-right: 70px;
   }
   #bgDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: #777;
    opacity: 0.7;
   }
        </style>
    </head>
 <body>
  <div id="bgDiv" style="display:none;">        </div>
     <a href="javascript:" onClick="bgDiv.style.display='';loginBox.style.display='';">登录</a>
        <div id="loginBox" style="position:absolute; left:367px; top:150px; z-index:1;display: none;" >
            <div class="title" id="Mdown">
                <span class="t1">登录</span>
                <span class="t2" title="关闭" onClick="login.style.display='none';bgDiv.style.display='none'">X</span>
            </div>
            <div class="login">
                <form method="post" action="#">
                    <table>
                        <tr>
                            <td>用户名:</td><td><input type="text"name="username" size="12" maxlength="10"></td>
                        </tr>
                        <tr>
                            <td>密 码:</td><td><input type="text"name="password" size="12" maxlength="10"></td>
                        </tr>
                        <tr>
                            <td></td><td><button class="submit" type="submit">登陆</button></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    <script type="text/javascript">
   var IsMousedown, LEFT, TOP, login;
   document.getElementById("Mdown").onmousedown=function(e) {
    login = document.getElementById("loginBox");
    IsMousedown = true;
    e = e||event;
    LEFT = e.clientX - parseInt(login.style.left);
    TOP = e.clientY - parseInt(login.style.top);
    document.onmousemove = function(e) {
     e = e||event;
     if (IsMousedown) {
      login.style.left = e.clientX - LEFT + "px";
      login.style.top = e.clientY - TOP + "px";
     }
    }
    document.onmouseup=function(){
     IsMousedown=false;
    }
   }
        </SCRIPT>
</body>
</html>
Javascript 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 #Javascript
window.onresize 多次触发的解决方法
Nov 08 #Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
jquery ajax修改全局变量示例代码
Nov 08 #Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 #Javascript
You might like
mysql 搜索之简单应用
2007/04/27 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python2.x与Python3.x的区别
2016/01/14 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
SQL Server面试题
2013/04/04 面试题
《美丽的公鸡》教学反思
2014/02/25 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
团队拓展活动总结
2014/08/27 职场文书
改革共识倡议书
2014/08/29 职场文书
校长个人总结
2015/03/03 职场文书
被告答辩状范文
2015/05/22 职场文书
导游词之北京明十三陵
2019/10/28 职场文书