原生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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
告诉大家什么是JSON
Jun 10 Javascript
js function定义函数使用心得
Apr 15 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
关于js类的定义
Jun 28 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
python写xml文件的操作实例
2014/10/05 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
微博营销计划书
2014/01/10 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2015年见习期工作总结
2014/12/12 职场文书
单位介绍信格式
2015/01/31 职场文书
68句权威创业名言
2019/08/26 职场文书
python批量创建变量并赋值操作
2021/06/03 Python