<!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. hashlib、hmac

    #hashlib import hashlib#md5m = hashlib.md5()m.update(b"Hello")print(m.hexdigest()) #hexdig ...

  2. tomcat+apache的集群配置

    背景:项目比较大,用户较多,同一时间,用户在线人数较多,为此,整体架构是lvs(2台)+keepalived(2台)+apache(N台)+tomcat(N台) lvs负责分发请求,所有的web请求经 ...

  3. Visual Studio 2017 最新全量离线下载方法[有惊喜]

    从官网下载的是 VS在线安装程序,也只有这个可以下载,官网并不提供离线包下载,那么如何创建离线安装包呢? 使用cmd命令:vs_enterprise__914632938.1491737491.exe ...

  4. 20190402Linux进阶命令week1.2

    Linux常用命令详解(week1_day1_2) aliasunaliasunamesuhostnamehistorywhichwcwwhowhoamipingkillseqdudffreedate ...

  5. Shell 常用技巧

    Shell 常用技巧 echo $RANDOM | cksum | cut -c - openssl rand -base64 | cksum | cut -c - date +%N | cut -c ...

  6. Codeforces Round #467 (Div. 2) B. Vile Grasshoppers

    2018-03-03 http://codeforces.com/problemset/problem/937/B B. Vile Grasshoppers time limit per test 1 ...

  7. Docker入门 配置篇

    docker配置 http://www.runoob.com/docker/docker-tutorial.html

  8. node服务的安装以及vue的安装

    相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...

  9. DAY8 文件操作(二)

    一.写 1.1写文件 # w:没有文件新建文件,有文件就清空文件 w = open('1.txt', 'w', encoding='utf-8') w.write('000\n') # 在写入大量数据 ...

  10. echarts tooltip巧用

    tooltip : { trigger: 'item', triggerOn: 'click', formatter:function(params,ticket,callback){ var res ...