js弹出一个可拖拽的div+背景变灰

最新推荐文章于 2021-08-03 19:59:29 发布
最新推荐文章于 2021-08-03 19:59:29 发布
阅读量46 收藏
点赞数
文章标签： xhtml javascript ViewUI

以下代码在ie和firefox中都可以执行：

<!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" />
<script language="javascript">
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
var loginDivWidth = 300;
var sign_in_flow = '<div style="background:#FF9900;">Login</div><div>e-mail:*</div><div>'
+ '<input type="text" id="sign_email" maxlength="64" size="30"/>'
+ '</div><div>password:*</div><div><input type="password" size="30"/>'
+ '</div><div><input type="button" value="login" />&nbsp;&nbsp;'
+ '&nbsp;&nbsp;<input type="button" value="cancel" οnclick="cancelSign();"/></div>';
function cancelSign(){
document.getElementById("sign_div").style.display = 'none';
document.getElementById("cover_div").style.display = 'none';
document.body.style.overflow = '';
};
function popCoverDiv(){
var coverDiv = document.createElement('div');
document.body.appendChild(coverDiv);
with(coverDiv.style) {
display = 'none';
position = 'absolute';
background = '#CCCCCC';
left = '0px';
top = '0px';
var bodySize = getBodySize();
width = bodySize[0] + 'px'
height = bodySize[1] + 'px';
zIndex = 98;
if (isIE()) {
filter = "Alpha(Opacity=60)";
} else {
opacity = 0.6;
}
}
coverDiv.id = 'cover_div';
}
function getBodySize(){
var bodySize = [];
with(document.documentElement) {
bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;
bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;
}
return bodySize;
}
function popSign(){
var signDiv = document.createElement('div');
document.body.appendChild(signDiv);
with (signDiv.style) {
display = 'none';
cursor='move';
position = 'absolute';
left = (document.documentElement.clientWidth - loginDivWidth)/2 + 'px';
top = (document.documentElement.clientHeight - 300)/2 + 'px';
width = loginDivWidth + 'px';
zIndex = 99;
background = '#FFFFFF';
border = '#66CCFF solid 1px';
}
signDiv.id = 'sign_div';
signDiv.align = "center";
document.getElementById("sign_div").innerHTML = sign_in_flow;
}
function popSignFlow() {
document.getElementById("cover_div").style.display = '';
document.getElementById("sign_div").style.display = '';
document.body.style.overflow = "hidden";
}

//以下是拖拽。。。
var offsetX = 0;
var offsetY = 0;
var currentLeft = 0;
var currentTop = 0;
var isDrag = false;

function stopEvent(evt){
var event = window.event?window.event:evt;
if (event.preventDefault) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
}
}
function drag(){
popCoverDiv();
popSign()
document.getElementById('sign_div').onmousedown = function(evt){
var evt = window.event?window.event:evt;
if ((evt.which && evt.which == 1 ) || (evt.button && evt.button == 1)){
isDrag = true;
offsetX = evt.clientX;
offsetY = evt.clientY;
currentLeft = parseInt(document.getElementById('sign_div').style.left);
currentTop = parseInt(document.getElementById('sign_div').style.top);
}
stopEvent(evt);
}
document.onmousemove = function(evt){
if(isDrag){
var evt = window.event?window.event:evt;
document.getElementById('sign_div').style.left = evt.clientX - offsetX + currentLeft +'px';
document.getElementById('sign_div').style.top = evt.clientY - offsetY + currentTop +'px';
stopEvent(evt);
}
}
document.onmouseup = function(evt){
isDrag = false;
var evt = window.event?window.event:evt;
currentLeft = parseInt(document.getElementById('sign_div').style.left);
currentTop = parseInt(document.getElementById('sign_div').style.top);
stopEvent(evt);
}
}
</script>
</head>
<body onLoad="drag();">
<div>
<input type="button" οnclick="popSignFlow();" value="login"/>
</div>
</body></html>

wapysun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹出div后面窗口变灰
曹海成的专栏
11-06 3390
当时刚工作不久,做东西的时候出现个问题,就是上传文件的时候多次点击提交按钮重复提交的问题。 现在想起来解决的办法有好多种,可是当时的确纠结的够呛。领导说写个文件上传的进度条不错,还美观,当时由于小弟底子太薄,研究了一天也没整出那个实时的文件上传进度条, 无奈之下,上网找了个类似于进度条 的功能（是假滴）。   JS弹出一个网页对话框，后面全变灰，并不可用。 *{margin:0;
JS 弹出窗口，底层画面置灰且不能操作
weixin_44084713的博客
02-20 1902
方法一： 转载地址 <html> <head> <title>弹出一个窗口后，后面的层不可操作</title> <script> function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style.display="block"; //显示隐藏层 hidebg.style.height=document.body.c
如何用JS代码实现鼠标移动，背景变色？
weixin_34294649的博客
08-26 628
其实就是监听了鼠标的变化实现onmouseover()、onmouseout()两个方法<style> .first{background:#666;} .gray{background:red;} </style><divclass="first"onmouseover="this.className=...
JS中使用DOM-Drag实现移动蒙版效果
遮住阳光
09-08 330
JS中使用DOM-Drag实现移动蒙版效果 1.将一个白色图片设置半透明作为蒙版； 2.使用Drag.init(o, oroot, minX, maxX, minY, maxY);将一个小透明图片作为子组件，半透明图片作为父组件； 3.拖动透明图片带动蒙版一起移动； 4.只有IE支持蒙版效果。 DOMDragEx8.html: 程序代码 ...
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
10-24
在JavaScript编程中，实现点击按钮弹出一个可关闭层窗口并使网页背景变灰的效果，是一种常见的用户交互设计，常用于提示信息、确认操作或显示模态对话框。以下是实现这一功能的关键知识点： 1. **JavaScript事件...
JS弹出可拖拽可关闭的div层完整实例
10-24
主要介绍了JS弹出可拖拽可关闭的div层完整实现方法,包括对div弹出层的样式及功能的实现技巧,非常具有实用价值,需要的朋友可以参考下
JS+CSS实现可拖动的弹出提示框
10-24
在网页设计中，创建一个可拖动的弹出提示框是一项常见的需求，它能提供用户交互体验，使得信息展示更加灵活。本实例将通过JavaScript（JS）和层叠样式表（CSS）技术来实现这一功能。以下是实现这个功能的具体步骤和...
弹出一个可拖拽的div
11-06
在网页开发中，创建一个可拖拽的div层是一项实用的技术，它允许用户通过鼠标操作移动界面元素，提升用户体验。这个技术主要涉及到HTML、CSS和JavaScript的交互运用，特别是JavaScript中的事件监听和DOM操作。接下来...
一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码
09-06
标题中的“一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码”指的是在网页中实现一个跨浏览器的弹出提示窗口，该窗口不仅具有背景变暗的效果，还可以被用户拖动。这个功能在多种浏览器环境下，包括IE、...
鼠标拖拽div移动并且背景颜色随机改变（根据Vue自定义指令）
candy755的博客
09-10 2558
今天给大家利用vue自定义指令做一个简单拖拽效果，所谓自定义指令就是Vue除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。因为Vue自带的指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，所以就需要自定义指令，下图是自定义指令的语法。. 今天所要实现的效果，代码如下： &lt;!DOCTYPE html&gt; &l...
js实现 鼠标拖动背景图片
wawa129的专栏
07-12 367
.dragme{position:relative;} //alert(document.getElementById("moveid").style.left); var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; v...
实现div拖拽的几种方式
Hiqingtian的博客
03-23 9867
&lt;%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery拖放&lt;/title&gt; &lt;scri
css 背景平铺 控制范围,实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围...
weixin_29189373的博客
08-03 281
效果：代码：html：css：body,html{margin:0;padding:0;height:100%;}#box{width:600px;height:500px;overflow:hidden;}#left{width:calc(30% - 5px);height:100%;background:skyblue;float:left;}#resize{width:5px;height:...
css 透明_Sortable.js 取消难看的拖拽半透明效果，以及改变拖拽项的CSS属性
weixin_39665379的博客
11-29 990
Sortable.js 预设的拖拽的渐进色半透明很难看谁用谁知道。我们可以把它改到正常的半透明或实心颜色，甚至可以改变拖拽项的边框、颜色、提示等等。初始设置要用到forceFallback短板是不能用到支持 html5 浏览器的 Drag and Drop 自带功能，我目测性能并没有可见区别。当然可能是我几十行数据量不够大。然后在css里面加，就这么轻松搞定。.参考测试页面 https://jsb...
JS 简单的弹出窗口拖拽
最新发布
05-12
然后，在你的 JavaScript 文件中，你可以使用以下代码来创建一个可拖拽的弹出窗口： ```javascript $(function() { $("#dialog").draggable(); }); ``` 其中，`#dialog` 是你弹出窗口的 ID。你需要在 HTML 中创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值