<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

* {margin: 0;padding: 0;}

#login {

	width: 300px;

	height: 300px;

	background: white;

	border: 1px #000 solid;

	position: absolute;

	display: none;

	left: 50%;

	top: 50%;

	margin-left: -150px;

	margin-top: -150px;

	z-index: 200;

}

#close {

	position: absolute;

	top: 0;

	right: 0;

	cursor: pointer;

}

</style>

<script src="jquery-1.11.1.js"></script>

<script>

$(function () {

	$shadow = $('<div style="background:#000;opacity:0.5;width:100%;height:100%;z-index:20;"></div>');

	$('#input1').click(function () {

		$('body').append($shadow);

		$('#login').toggle();

	});

	$('#close').click(function () {

		$('#login').hide();

		$shadow.remove();

	});

	$(window).on('resize scroll', function () {

		$('#login').css('top', ($(window).height() - $('login').outerWidth()) / 2 + $(window).scrollTop());

	})

	var disX = 0;

	var disY = 0;

	$('#login').mousedown(function (ev) {

		disX = ev.pageX - $(this).offset().left;

		disY = ev.pageY - $(this).offset().top;

		if ($('#login').setCapture) {

			$('#login').setCapture();

		}

		$(document).mousemove(function (ev) {

			$('#login').css('left', ev.pageX - disX);

			$('#login').css('top', ev.pageY - disY);

		})

		$(document).mouseup(function () {

			$(document).off();

		});

	});

});

</script>

</head>

<body style="height:2000px">

	<input id="input1" type="button" value="登录" />

	<div id="login">

		<p>用户名:<input type="text" /></p>

		<p>密码:<input type="text" /></p>

		<div id="close">X</div>

	</div>

</body>

</html>

　　

jq demo 点击弹窗，居中，可滚动，可拖动的更多相关文章

  1. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. HTML5 <input>添加多张图片，可点击弹窗放大。限定4张，可删除。

    点击弹窗放大,需要加入插件. <link rel="stylesheet" href="css/photoswipe.css"> <link ...

  4. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

  5. 百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单

    利用绘制工具绘制点线面,并在执行绘制完成回调事件给相应覆盖物添加事件操作,提供标注的点击弹窗和标注.折线.多边形的右键删除 效果图如下: 完整代码如下:html+js <!DOCTYPE htm ...

  6. openlayers 添加标记点击弹窗 定位图标闪烁

    环境vue3.0 ,地图为公用组件,将添加图标标记的方法放在公共地图的初始化方法里 同一时间弹窗和定位标识都只有一个,因而我把弹窗和定位标记的dom预先写好放到了页面 //矢量标注样式设置函数,设置i ...

  7. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  9. jq图片点击居中放大原始图片兼容ie

    /* *鍥剧墖澶у浘鏄剧ず */ function imgshow(){ content_div:"";//内容 bg_div:"";//背景变暗 img_di ...

随机推荐

  1. 记mysql中时间相关的一个奇怪问题

    发现mysql中类型为时间的字段,在查询时显示的时间是什么是依赖于客户端的,不同的客户端查同一个时间,可能在客户端显示的时间是不一样的.至于这个在哪里配置,以及服务端如何依据这个配置为客户端返回结果, ...

  2. 更改linux终端中用户名颜色

    用户名的设置在-下.bashrc文件中,更改PS1变量的值,如果没有就自己加一行 PS1='\[\e[32m\][\u@\h \W]#\[\e[m\] ' 32代表的是绿色前景色,\[\e[m\]是关 ...

  3. 记录　用tiny6410 j-link eclipse 在线调试裸机代码leds

    1．nand flash烧写uboot 并且启动nandflash uboot,用来初始化6410,进入uboot命令行界面 2．在terminal中输入JLinkGDBServer -device ...

  4. 艾妮记账本Web开发（开发版）

    因为没有办法制作微信小程序版的艾妮记账本所以只能选择做Web开发版,但因为是花时间赶出来到的(但用了我已学的所有Web知识)所以就没有办法按老师的要求写七天的制作过程. 其实真正说起来我的这个Web开 ...

  5. python学习教程,史上最全面的python学习路线图

    Python 是Web 开发.游戏脚本.计算机视觉.物联网管理和机器人开发的主流语言之一,随着Python用户可以预期的增长,它还有机会在多个领域里登顶.Python学习路线分享给你. 阶段一是Pyt ...

  6. G711 G723 G729线路占多少带宽问题

    G.711   G.711   也称为PCM(脉冲编码调制),是国际电信联盟订定出来的一套语音压缩标准,主要用于电话.它主要用脉冲编码调制对音频采样,采样率为8k每秒.它利用一个 64Kbps 未压缩 ...

  7. jackson中@JsonProperty、@JsonIgnore等常用注解总结

    本文为博主原创,未经允许不得转载: 最近用的比较多,把json相关的知识点都总结一下,jackjson的注解使用比较频繁, jackson的maven依赖 <dependency> < ...

  8. vue--vux框架的使用

    <1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader npm install vux-loader --save-de ...

  9. All You Can Code 2008 (Romanian Contest) A - Tree Search

    A - Tree Search 思路: 经典树形dp dp[i][0]表示i的子树中以i为端点的最大链 dp[i][1]表是整棵树中除去i的子树剩下的部分以i为端点的最大链 最后答案就是以i为端点的最 ...

  10. RabbitMQ（5）FanoutExchange

    Fanout 就是我们熟悉的广播模式或者订阅模式,给Fanout交换机发送消息,绑定了这个交换机的所有队列都收到这个消息. 生产者工程: package com.example.demo.rabbit ...