多对话框窗口 同时显示 相互重叠 点击切换(置顶)实现

摘要:
1、 效果类似于多浏览器窗口之间的重叠切换,如下图所示:2.想法是使用css的z-index属性来控制1.将calss‘dialog添加到每个对话框window_z_index‘2.将onmousedown鼠标事件绑定到每个对话框窗口,如行中的onmousedown=“setDialogZIndex(this)”;3.声明每个对话框使用的z索引值,例如:vardialogIndex=$('.dialo

一、效果类似于 多浏览器窗口间的重叠切换  点击后置顶  如下图:

多对话框窗口 同时显示 相互重叠 点击切换(置顶)实现第1张

二、思路:就是用css的z-index属性控制

1、给每个对话窗窗口增加calss   ‘dialog_z_index’;

2、给每个对话窗窗口 绑定onmousedown鼠标事件  如行内绑定onmousedown="setDialogZIndex(this)" ;

3、声明每个对话框所用的z-index的值 如: var dialogIndex = $('.dialog_z_index').length + 1024;

4、定义设置对话框z-index的方法  如

function setDialogZIndex(id) {
dialogIndex++;
$(this).css({"z-index":dialogIndex});
}

免责声明:文章转载自《多对话框窗口 同时显示 相互重叠 点击切换(置顶)实现》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇生成唯一标识符 ,通用唯一标识符 UUID如何检查Android网络连接状态下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

解决select2在bootstrap的modal中默认不显示的问题

转https://www.cnblogs.com/skybreak/p/6137035.html 在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题。代码解决如下: <style> /*select2在Bo...

解决绝对定位div position: absolute 后面的&amp;lt;a&amp;gt; Link不能点击

今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击。 网上的解决方案是在绝对定位层里面添加:pointer-events:none;这样能够让鼠标事件穿透这个绝对定位层,使之能点击到后面的<a>,然后再在这个绝对定位层里面需要接受事件的<a>上面添加:p...

小程序 大转盘 抽奖 canvas animation

项目需求运用到大转盘 可设置概率 可直接自定义结果 效果如下  ​ 两种方法及结合法 一 通过canvas 实现 但是因为定时器原因 手机端卡顿严重 故而最终使用了方法二 但也是该记录下 学习canvas 二 通过小程序Api animation完成完美解决卡顿问题 更精确定位 有样式缺陷 css无法解决样式 自动分配问题 故结合一二两种方法 出现第三种...

bootstrap添加多个模态对话框支持

  因为项目需要,在页面交互上要弹出多个dialog窗口,而bootstrap的modal支持弹出dialog窗口,但是在此基础上,会出先遮罩层越来越多,背景越来越黑的情况代码具体如下:(function(){ modal = {}; modal.openDialog = function(url, title, width, height, id){...

z-index 应用简单总结

做过页面布局的同学对z-index属性应该是很熟悉了,z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的...

chrome升级后出现滚动条无法滚动

最近升级chrome最新版本后,导致项目中功能页面的局部滚动条无法滚动(心里暗骂了很久),无论怎么滚动都是最外层的滚动条响应... 1、猜想:尼玛google应该不会干事件流混乱这种事,pass; 2、有莫名浮层干扰:经过千方对比发现是由外容器的position: absolute、 z-index: xx导致,去掉z-index属性后,滚动正常;问题来...