原生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 相关文章推荐
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
element跨分页操作选择详解
Jun 29 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
PHP连接Access数据库的方法小结
2013/06/20 PHP
php后门URL的防范
2013/11/12 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
js实现网页收藏功能
2015/12/17 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python 复平面绘图实例
2019/11/21 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
什么是servlet
2012/05/08 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
公司会计岗位职责
2014/02/13 职场文书
党员干部一句话承诺
2014/05/30 职场文书
物业保安岗位职责
2014/07/02 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2014年财政工作总结
2014/12/10 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android