JQuery之编写弹窗

演示地址：http://sandbox.runjs.cn/show/irefekbs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding: 0;}#login { z-index:9999; height: 200px; width: 300px; background: #ccc; padding-top: 30px; box-shadow: 0 0 20px rgba(0,0,0, 0.2); border-radius: 5px; position: absolute; /*top: 225px; left: 500px;*/}#login p { margin: 10px auto; width: 250px; }#login p:nth-child(1) { margin-top: 50px; }#close { position: absolute; top: 10px; right: 10px; cursor: pointer;}#loading-mask {position: absolute; top: 0; left: 0; /*width: 100%; height: 1030px;*/ background: rgba(0,0,0, 0.4);}</style><script type='text/javascript' src='http://files.cnblogs.com/littledu/littledu.js'></script><script>$(function(){$('#open').click(function(){//遮罩层var mask = $('<div id="loading-mask"></div>');mask.css('width', $('body').width());mask.css('height', $('body').height());$('body').append(mask);//弹窗var oLogin = $('<div id="login"><p>用户名：<input type="text"></p><p>密&nbsp;码：<input type="text"></p><div id="close">X</div></div>');$('body').append(oLogin);//设置弹窗的显示位置
                oLogin.css('left', ($(window).width() - oLogin.width())/2 );
                oLogin.css('top', ($(window).height() - oLogin.height())/2 );//浏览器窗口或滚动条改变时
                $(window).on('resize scroll', function(){oLogin.css('left', ($(window).width() - oLogin.width())/2 + $(window).scrollLeft());
                    oLogin.css('top', ($(window).height() - oLogin.height())/2 + $(window).scrollTop());
                });//移除遮罩和弹窗
                $('#close').click(function(){mask.remove();oLogin.remove();});});});</script>
</head>
<body style="height:1000px;">
<!-- <div id="loading-mask"></div> -->
<input type="button" value="弹窗" id="open">
<!-- <div id="login"><p>用户名：<input type="text"></p><p>密&nbsp;码：<input type="text"></p><div id="close">X</div>
</div> --></body>
</html>

转载于:https://www.cnblogs.com/jasontoyell/p/4784099.html

JQuery之编写弹窗相关推荐

jQuery插件编写，
jQuery插件编写 jQuery插件最近搞jquery插件的编写这里做下笔记给jquery扩展的方式很多,看的我眼花缭乱方式1 $.fun=function(){} 方式2 $.fn.fun= ...
jQuery Mobile中弹窗popup的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中弹窗popup的data-*选项带有 data-role="popup&q ...
自己动手丰衣足食之征服jQuery插件编写
原文地址:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其 ...
jquery+javascript编写国籍控件
jquery+javascript编写国籍控件主要功能和界面介绍国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍国籍控件核心是两个文件,navtionality.js 和 mian.c ...
基于jquery.jsPlumb编写拓扑图
基于jquery.jsPlumb编写拓扑图要求:实现公司组织结构拓扑关系,可展开,可收拢:动态数据展示:叶子节点可点击: 实现办法: 1 国内还有一个插件也比较简单,但是该插件只能全部展开,并不能 ...
jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: 1 <!DOCTYPE ...
jQuery插件编写基础之“又见弹窗”
本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 ...
jquery.prompt.js 弹窗的使用
1 /***2 * Prompt提示语插件3 * 编写时间:2013年4月8号4 * version:Prompt.1.0.js5 * author:小宇<i@windyland.com> ...
JQuery插件之弹窗：lhgDialog
2019独角兽企业重金招聘Python工程师标准>>> [文件&目录] lhgdialog.js - 未压缩的lhgDialog弹出窗口组件代码源文件 lhgdialog.m ...

JQuery之编写弹窗

JQuery之编写弹窗相关推荐

最新文章

热门文章