js实现模态框的拖拽效果

一、js实现模态框的拖拽效果

本文实例为大家分享了js实现模态框拖拽效果的具体代码，供大家参考，具体内容如下

之前学习js遇到了这样的需求：鼠标按下后，移动鼠标，模态框随鼠标移动，鼠标松开，模态框也不会随鼠标移动。

1.点击弹出层，模态框和遮挡层就会显示出来。display：block

2.点击关闭按钮，模态框和遮挡层就会隐藏。display：none

3.在页面中拖拽的步骤：鼠标按下并移动，之后松开鼠标

4.触发事件是鼠标按下mousedown，鼠标移动是mousemove，鼠标松开：mouseup

5.拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了

6.鼠标按下触发的时间源是最上面一行，也就是说，鼠标只有放在最上面一行，才能触发该事件。放在其他区域不会触发该事件。

7.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。（因为模态框是可移动的，只有第一次才能拿到模态框的left和top，其他时候并不能直接拿到。所以采用鼠标的坐标-鼠标在模态框内的坐标来计算模态框的位置）

8.鼠标按下，我们要得到鼠标在盒子内的坐标

9.鼠标移动，就让模态框的坐标设置为：鼠标坐标-盒子坐标即可。注意移送事件要写到按下事件里面

10.鼠标松开，就停止拖拽，可以让鼠标移动事件解除

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1.0"

background-color: antiquewhite;

transform: translate(-50%,-50%);

background-color: antiquewhite;

border: 1px solid rgb(77, 73, 73);

a href="javascript:;" id="link"点击，弹出登录框/a

div class="login-title"登录会员

span a id="colseBth" href="javascript:void(0);" class="close-login"关闭/a/span

div class="login-input-content"

input type="text" placeholder="请输入用户名" name="info[sername]" id="username" class="username"

input type="password" placeholder="请输入登录密码" name="info[password]" id="password"

div class="login-button" id="loginBtn"

a href="javascript:void(0);" id="login-button-submit"会员登录/a

div class="login-bg" id="bg"/p>

// 3.点击关闭模态框和遮罩层自动隐藏

// 4.页面拖拽原理：鼠标按下且移动，之后松开鼠标

// 5.拖拽过程：鼠标移动的时候获得新的值赋值给模态框的left和top值。

var oLink= document.querySelector('#link');

var oLogin= document.querySelector('.login');

var oBg= document.querySelector('#bg');

var oClose= oLogin.querySelector('#colseBth');

var title= oLogin.querySelector('.login-title');

??//2.点击弹出层这个链接link，让mask和login显示出来

oLink.addEventListener('click', function(){

oLogin.style.display='block';

oBg.style.display='block';

??//3.点击closeBtn就隐藏mask和login

oClose.addEventListener('click', function(){

oLogin.style.display='none';

oBg.style.display='none';

??//（1）当我们鼠标按下，就获得鼠标在盒子内的坐标

title.addEventListener('mousedown', function(e){

var x= e.pageX- oLogin.offsetLeft;

var y= e.pageY- oLogin.offsetTop;

??//（2）鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left和top值

??//?? document.addEventListener('mousemove', move)

?????????? oLogin.style.left= e.pageX- x+'px';

?????????? oLogin.style.top= e.pageY- y+'px';

??//??//（3)鼠标弹起，就让鼠标移动事件移除

??????? document.addEventListener('mouseup', function(){

?????????? document.removeEventListener('mousemove', move);

二、js弹出提示框1秒消失

js点击弹出提示层2秒钟之后自动消失

1、这段代码不规范，建议完善。

2、实现原理：利用css3动画，通过点击按钮添加class。

3、functionjsCopy(){vare=document.getElementById(content)；e.select()；document.execCommand(Copy)；/alert是系统警告对话框，弹出之后任何代码都将被强制暂停。所以1秒后自动关闭alert是不可行的。

jsp中点击按钮弹出框，常见的有window.open和window.showModalDialog()两种方法。

先执行运算，然后在弹出窗口，你可以把这个js代码放到jsp代码的后面，这样就可以实现运算完，再弹出窗口了。

jsp中的模态窗口是通过调用js方法弹出的。

1、很简单，首先写一个转圈的图片遮罩层状态hide，点击按钮后让该遮罩show，在你提交成功的时候再次隐藏遮罩，弹出提示框，给提示框一个mouserover事件，判断大于3秒关闭提示框。

2、IE的版本现在也有些多，不同的版本需要的驱动也不同。你换个IE版本也许就成了。CHROME是WEBKIT内核，这个内核目前应用的很广泛也比较透明。源代码也开源了。所以最容易做稳定。不过这里的JS引擎，各家都不同。

3、然后你需要每个省或者市的坐标信息。百度提供一个方法可以通过地名得到这个地名行政区域的坐标集合，具体的方法名你去百度地图api查。百度地图覆盖物提供一个标签覆盖物Marker，可以用来显示文本信息。剩下的你自己摸索吧。

4、建议你专门做一个显示GUI的对象，并制作成prefab。然后在接受到碰撞检测的时候创建出来。该GUI对象的脚本中，你在Start()里面加入一个Invoke方法，来调用你在本脚本中定义的自我摧毁函数（如DestroySelf）。参数设置为3秒。

5、(function(){//页面加载完毕之后执行setTimeout(function(){(#supe).fadeOut()；//把id为supe的元素淡出.fadeOut()方法也可以传入参数，如fadeOut(300)就是淡出的过程有300毫秒。

inputtype=textid=name这段代码不规范，建议完善。

用谷歌浏览器来调试，运行JS代码前先右键打开审查元素再点击console窗口，有错误的话，那里会报告的。或者，用火狐浏览器，安装firebug插件也有相应的功能。

可能有几种原因导致弹出警告框不显示：使用了错误的语法：如果弹出警告框的语法不正确，浏览器将无法正确解析代码并执行弹出警告框的命令。请确保您使用的语法正确。浏览器设置：有些浏览器可能会阻止弹出警告框。

这个问题其实不需要两个页面，只要三行JS代码就能实现，除非你在php里面还要做些文章。下面例子为打开新窗口，转到google，5秒后关闭。

HTML代码模拟：这种类型的警告框都是可以带有关闭方法的。

那么，再去关闭他的时候，浏览器为了安全，似乎有一个禁止跨域的操作，曾经百度过很多类似情况的解决方法，但似乎，js跨域，始终是一个瓶颈！如有完善方法，我也期待中。。

js或jq如何实现点击一个a标签,弹出对话框,并且对话框几秒后自动...

1、如何使Dialog可以通过点击其他区域消失。

1、如何使Dialog可以通过点击其他区域消失。

2、首先任何效果希望你自己动手去完成，我可以给你思路，但是必须自己动手去实现。jquery能帮助你点击一个按钮弹出提示框，但是这个框是windows自带的alert框或者confime框等，你要那种关闭按钮的，推荐jqueryui实现。

3、首先需要引入jquery脚本文件。然后添加一些简单的html，这里主要的就是在一个div里添加了二个a链接，div和a链接就各自有id属性。还有一个操作的按钮，加上了onclick事件的。然后需要添加对应的点击事件函数。

4、inputtype=buttononclick=disp_prompt()value=显示一个提示框//body/html注意事项：JS是javascript的缩写，是一种用于web开发的脚本代码。

三、divcssjs实现弹出框

css+div+js怎样在页面上弹出一个资料框来,然后页面背景都变成朦胧的灰...

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。在index.html中的script标签，输入js代码：$(#a).css(-webkit-filter，grayscale(50%))；。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。在index.html中的script标签，输入js代码：$(#a).css(-webkit-filter，grayscale(50%))；。

2、遮罩层：divid=back/div，即作为背景层，覆盖整个页面。

3、首先我们新建一个html文件，添加一个DIV，设置宽度和高度，以及背景色填充为红色。然后在父级DIV中插入一个子DIV，定义它的宽高，以及背景色。然后我们添加一个透明度的代码（opacity：0.6）。

4、新建一个HTML文件，保存为test.html，用于编写代码实现拖放功能。在test.html添加一个div标签，并且给它一个id，用于下面编写样式。通过div的id，给div定义CSS样式，例如，把div定义为一个带边框的长方形。

jsp页面设计中关于js+div的弹窗

1、建议你把这一段写成一个js方法放在head之间，onchange的时候调用该方法。在方法里面你还可以alert出this.value的值，看看是不是你要传的值。

1、建议你把这一段写成一个js方法放在head之间，onchange的时候调用该方法。在方法里面你还可以alert出this.value的值，看看是不是你要传的值。

2、jsp中的模态窗口是通过调用js方法弹出的。

3、jsp中点击按钮弹出框，常见的有window.open和window.showModalDialog()两种方法。

4、你是想通过调用servlet方法。返回到JSP进行提醒是否修改成功对吧。如果是这样的话你只需要再servlet里面定义一个PrintWriterout=response.getWriter()；对象。通过out.print(“填写返回内容”)。

5、这个你不难啊，弹框用div实现，确定取消不就是一个a标签或者图片还有button也行。

1、在body里面布局，把对话框的大致结构写出来。写css样式，让对话框在网页上体现出来。得到如下图样式，结构完成。最后就是写js样式，让我们的对话框达到一定的效果。点击超链接弹出对话框。

2、就是用js实现的。当然，还有很多种方法。比如新建一个弹窗层，加入遮罩等等。在这个框架里面基本都有实现，去看看api就能了解很多了。

3、这个动画跟css3的动画没什么关系，主要是那个来回弹的东西，叫缓动，模拟真实世界物体加速到减速的过程。搜索下：flash或js缓动函数，有很多文章。

4、-moz-，-webkit-，-o-这些都是浏览器前缀。box-shadow才是css样式。

5、js如何做动画效果直接用jquery，网上有很多开源代码，容易上手。

6、用js触发css的过渡效果可以用impress.js实现。

明白了这个就好办了，给弹出框的父标签加上属性position：relative，再调整一下偏移量（就是left或right，top或bottom的值）就可以了。

通过window.open方法以弹出页面方式实现。通过window.showmodaldialog方法以弹出对话框方式实现。

为超链接添加onclick()动作，动作内容为弹出对话框。