jq demo 点击弹窗，居中，可滚动，可拖动
<!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 点击弹窗，居中，可滚动，可拖动的更多相关文章
- jq demo 点击评分组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq demo 点击选中元素左右移动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5 <input>添加多张图片，可点击弹窗放大。限定4张，可删除。
点击弹窗放大,需要加入插件. <link rel="stylesheet" href="css/photoswipe.css"> <link ...
- 基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
- 百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单
利用绘制工具绘制点线面,并在执行绘制完成回调事件给相应覆盖物添加事件操作,提供标注的点击弹窗和标注.折线.多边形的右键删除 效果图如下: 完整代码如下:html+js <!DOCTYPE htm ...
- openlayers 添加标记点击弹窗 定位图标闪烁
环境vue3.0 ,地图为公用组件,将添加图标标记的方法放在公共地图的初始化方法里 同一时间弹窗和定位标识都只有一个,因而我把弹窗和定位标记的dom预先写好放到了页面 //矢量标注样式设置函数,设置i ...
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- jq图片点击居中放大原始图片兼容ie
/* *鍥剧墖澶у浘鏄剧ず */ function imgshow(){ content_div:"";//内容 bg_div:"";//背景变暗 img_di ...
随机推荐
- windows10系统下安装pygame
1.安装python,选择版本3.7.1 下载地址:https://www.python.org/downloads/windows/选择安装版本 2.安装pip 下载地址:https://pypi. ...
- C#中MemoryStream类的介绍
MemoryStream位于System.IO命名空间,为系统内存提供流式的读写操作.常作为其他流数据交换时的中间对象操作. 1.MemoryStream类封装一个字节数组,在构造实例时可以使用一个字 ...
- Linux基础培训知识点汇总
一.Linux简介1.Linux操作系统诞生于1991年10月5日,由林纳斯·托瓦兹在comp.os.minix新闻组上发布消息,正式向外宣布Linux内核的诞生.2.Linux同时也衍生了很多版本( ...
- java.lang.ClassCastException: com.sun.proxy.$Proxy* cannot be cast to***
Spring AOP 有两种代理方法, 一种是常规JDK,一种是CGLIB. 当代理对象实现了至少一个接口时,默认使用JDK动态创建代理对象: 当代理对象没有实现任何接口时,就会使用CGLIB方法. ...
- np.meshgrid(）用法+ np.stack()用法
A,B,C,D,E,F是6个网格点,坐标如图,如何用矩阵形式(坐标矩阵)来批量描述这些点的坐标呢?答案如下 这就是坐标矩阵——横坐标矩阵X XX中的每个元素,与纵坐标矩阵Y YY中对应位置元素,共同构 ...
- Linux 默认线程栈大小 调优
Linux 线程栈介绍 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区.里面的变量通常是局部变量.函数参数等:和堆相比,栈通常很小. Linux 查询线程栈 1.查看默认的 ...
- Linux 文件时间记录属性 调优
Linux 文件时间属性介绍 atime:(access time)显示的是文件中的数据最后被访问的时间,比如系统的进程直接使用或通过一些命令和脚本间接使用.(执行一些可执行文件或脚本) mtime: ...
- JS设计模式（6）命令模式
什么是命令模式? 定义:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化. 主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需要对行为进行记录. ...
- react-router 4.0（四）跳转404
import React from 'react' import ReactDOM from 'react-dom' import { HashRouter, Route, Link, Prompt, ...
- From传值
第一个Form,Form1: string value = string.Empty; using (Form2 frm = new Form2()) { if (frm.ShowDialog() = ...