<!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. Hibernate映射数据库中longtext类型属性时报错No Dialect mapping for JDBC type: -1的解决方案

    出现错误的原因是:hibernate中对于数据库的longtext数据类型不支持. 解决方案: 1.写个类集成方言,然后自己实现对longtext的支持 import java.sql.Types; ...

  2. Go 初体验 - 令人惊叹的语法 - defer.2 - 如何提前执行？

    上一文中讲到 defer 会在宿主函数 return 之前调用,那么我们就是想在宿主函数执行到中间调用,怎么办呢? 1. 改变宿主函数逻辑,分成多个函数,需要的那个函数里 defer . 2. 使用匿 ...

  3. Python之猴子补丁

    1.在运行时,对属性,方法,函数等进行动态替换 2.其目的往往是为了通过替换,修改来增强,扩展原有代码的能力 #test2.py class Person: def get_score(self): ...

  4. U盘安装Windows Server 2008 r2失败，改用磁盘安装

    一.使用UltraISO制作系统安装启动U盘提示错误“缺少所需的CD/DVD驱动器设备驱动程序.…………”试了各种方法都不能通过U盘进行安装. 二.直接使用磁盘安装0.使用PE先将磁盘格式化.分区.1 ...

  5. Divide the Sequence (贪心)

    题意:求将一串数据尽可能多分成所有前缀和大于0的连续子串. 思路:由于是要求所有前缀和大于0,那么只要从后往前推就好了. #include<bits/stdc++.h> using nam ...

  6. Beautiful Soup 学习手册

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式   快速开始 下面的一段HTML代码将作为例 ...

  7. 【题解】Luogu P2766 最长不下降子序列问题

    原题传送门 实际还是比较套路的建图 先暴力dp一下反正数据很小 第一小问的答案即珂以求出数列的最长不下降子序列的长度s 考虑第二问如何做: 将每个点拆点 从前向后连一条流量为1的边 如果以它为终点的最 ...

  8. [c/c++] programming之路（17）、高级指针

    一.二级指针 二级指针的作用:1.函数改变外部变量指针2.外挂改变一个指针的值 #include<stdio.h> #include<stdlib.h> void main() ...

  9. 手游折扣app排行榜前10名_2018哪个折扣app最低最好

    2018游戏圈白皮书发布,PC端游的份额继续下降,页游的比例也在下降,但手游的比例持续3年上升.以渠道为阵营,逐渐小的平台和公会被逐渐淘汰.流量集中在少数几个大的平台.但是这样带来的问题是,平台越来越 ...

  10. HDFS初次编程

    hadoop是用Java语言实现的开源软件框架,可以支持多种语言,我学习的时候用得自然就是Java了. 在开始编程之前需要做一些配置工作: Hadoop开发:Hadoop为HDFS和Mapreduce ...