遮罩层提示框，可拖动标题栏（兼容FF）

最新推荐文章于 2022-07-12 17:59:58 发布
最新推荐文章于 2022-07-12 17:59:58 发布
阅读量764 收藏
点赞数
分类专栏： js css 文章标签： function filter button server xhtml div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dasihg/article/details/6796755
版权
js 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
css
9 篇文章 0 订阅
订阅专栏

<!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>
<script type="text/javascript">
    function showFilter() {
        document.getElementById('filter').style.display = 'inline';
        document.getElementById('promptbox').style.display = 'inline';
    }
    function hidFilter() {
        document.getElementById('filter').style.display = 'none';
        document.getElementById('promptbox').style.display = 'none';
    }

    var Mouse_Obj = "none", _x, _y;
    document.οnmοusemοve=function(e) {
    if (Mouse_Obj != "none") {
            e = e ? e : window.event;
            var obj = document.getElementById(Mouse_Obj);
            obj.style.left = _x + e.clientX + "px";
            obj.style.top = _y + e.clientY + "px";
            event.returnValue = false;
        }
    }
    document.οnmοuseup= function() {
        Mouse_Obj = "none";
    }

    function m(o, e) {
        e = e ? e : window.event;
        Mouse_Obj = o;
        var obj=document.getElementById(Mouse_Obj);
        _x = obj.offsetLeft + 190; //这里的190是下面 margin-left:-190px 的偏移值
        _y = obj.offsetTop + 80; //这里的80是下面 margin-top:-80px;  的偏移值
        _x += -e.clientX;
        _y += -e.clientY;
    }
</script>

<style type="text/css">
body
{
 font-size: 9pt;
 font-family: 宋体;
}

#filter{display:none; position:absolute;bottom:0px;right:0px; left:0px; top:0px; z-index:1000;background: #000000;filter:Alpha(opacity=30);opacity:0.3}
#promptbox{display:none;  left:50%;top:50%;margin-left:-190px;margin-top:-80px; width: 380px; z-index: 1001;
        position: absolute; text-align: center; background-color: White; border:solid 1px #000; padding:0 0 10px}
.lefttit{ margin-left:20px; width:60px}
</style>
</head>
<body>
<a οnclick="showFilter();"  href="#">上传图片</a>
    <div id="filter">
    </div>
    <div id="promptbox" >
        <div οnmοusedοwn="m('promptbox',event)"  style="height: 24px; margin-bottom:20px; background-color: Blue; ">
            <span οnclick="hidFilter()" style="float: right; height: 24px; line-height:24px; background-color: Red;
                font-size: 20px; font-weight: bolder; color: White; cursor:pointer;">×</span></div>
                <div style="  text-align:left">
                <span class="lefttit">
        本地文件：</span><input type="file" style="width:280px" size="30" runat="server" id="oFile" /></div>
          <div style="margin:20px 0; text-align:left">   
          <span class="lefttit">
        图片标题：</span><input type="text" runat="server" id="txtNewImgName" size="40" /></div><div style="text-align: center;">
            <input type="button" οnclick="hidFilter()" value="取消" />&nbsp;&nbsp;&nbsp;&nbsp;
            <input id="Button1" type="button" οnclick="if(document.getElementById('oFile').value==''){alert('请选择本地文件！');return false;}if(document.getElementById('txtNewImgName').value==''){alert('请输入图片标题');return false;}"
                value="上传" runat="server" onserverclick="Upfile_Click" /></div>
    </div>

</body></html>

转载请注明出处：http://blog.csdn.net/dasihg/article/details/6796755
dasihg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（二）
总结前端开发中遇到的问题，分享前端知识
06-16 4139
实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（一）
总结前端开发中遇到的问题，分享前端知识
04-12 4545
element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
DUILIB创建不规则窗体
05-14
用DUILIB创建不规则窗体，对应博客地址：http://blog.csdn.net/harvic880925/article/details/8925650
duilib创建的窗体添加边框阴影效果
rundll64的专栏
09-25 5811
在使用duilib过程中，发现很多人提到关于创建窗体边框阴影效果的问题，查阅了下相关资料，找到如下代码，记录如下： WndShadow.h头文件 #pragma once #include "map" class CWndShadow { public: CWndShadow(void); public: virtual ~CWndShadow(void); protected:
js弹出框、遮罩层、可拖动学习
weixin_34343000的博客
09-07 146
解决弹出层定位滚动条scrollTop不兼容问题，即弹出层后滚动条不允许回到最上面，而是停在当前可见区域。 document.documentElement.scrollTop在ie中有值，但其他浏览器都为0； document.body.scrollTop在ie中为0，其他浏览器都有值。 特别注意：不要这样调用<a href="#" onclick="openL...
利用悬浮可拖动的遮罩层代替模态对话窗体
邹玉杰（邹琼俊）的专栏
11-28 2624
在项目开发中，我们一定经常遇到这样的情况。我们需要通过点击界面的某一个按钮，然后打开一个新的模态窗体的操作，然后如果使用js中的open或者openDialog会有如下问题：1、在IE浏览器中，高版本IE调用open()打开的窗体在浏览器中无法居中显示。 2、在FF等浏览器的高版本中openDialog()，无法实现模态效果。 那么我们可以通过使用第三方的js库(jquery)来实现悬浮可拖动
Android开发框架Collection，Android社招面经分享
code8889的博客
04-14 389
前言 其实一开始我考虑的是阿里的，因为那里有认识的人，希望通过内推可以顺利进入大厂，但是却被面试官一连串问题，完虐！这时候秋招已经过半，后来在牛客上看了很多牛友面经，也加了很多交流群，受到了很多朋友的提点，今天终于轮到我还愿啦，拿到了北京教育业务客户端的 offer，总结一下自己的面经和复习历程，顺便谈谈我的一些感受，给各位牛友提供一些参考。 先说一下我的情况吧，现在就读杭州电子科技大学，本科山东农业大学，本硕都是计算机。老区山东临沂人，平常喜欢拍照、旅游、看电影和基友一起打游戏。 break; case
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6381
h5(html5)+css3+移动端前端 知识点详细总结
WindowsXP相关设置对应的注册表位置
Steven的博客
10-11 5150
以下为 XP相应设置对应的注册表位置（不含针对文件夹位置和用户名等与个人计算机相关的设置项），不能直接复制导入注册表（因为省略了很多东西），如有需要，可下载完整的此注册表文件，可以直接使用，在XP SP2版中绝对不会引起问题，不过相应设置最好适当修改，否则可能不适合自己使用。 Windows Registry Editor Version 5.00        分号在一行开头表示注释，不会导
关于DUILIB的遮罩，控件穿透以及其应用的分析实践
TragicGuy的专栏
07-31 5924
本文对Duilib的遮罩层以及及穿透进行相关的讨论，原理很简单，除了讨论实现外，在本文也讨论如何利用这些特性、原理来实现需求，欢迎讨论。  1.       遮罩层的实现 在软件的UI显示中，我们经常会需要遮罩住整个窗口或者是窗口的一部分，以避免客户操作相应的UI，等待特定的操作完成之后才解除锁定。   其实这个在Duilib中，是非常容易实现的，好像还有不少人不太清楚，咱们这里就先来
Duilib改进窗口拖动，使整个窗口都能拖动两种方法(转载)
weixin_34024034的博客
11-26 564
转载:http://www.cnblogs.com/XiHua/articles/3490490.html 转载:http://blog.csdn.net/lostspeed/article/details/19275249  知识回顾: 　　当鼠标在窗口内移动,点击或者释放时都会产生WM_NCHITTEST消息,响应函数OnNcHitTest会返回一个枚举值,系统会根据这个枚举值进行相应的...
如何解决移动端遮罩层上面滑动穿透事件
weixin_34087307的博客
12-13 592
前段时间，在做移动端项目的时候，遇到滑动穿透事件。可以理解为冒泡事件？大概就是，当你滑动遮罩层上面的内容的时候，遮罩层下面的内容也会跟着一起动，这样用户体验就很不好了。后面百度了一堆方法，都是各种操作dom元素。自己这个本身是一个vue项目，还要操作dom？这就很不爽了吧。 解决思路 主要两步就完美解决了整个问题 1 使用vue的阻止默认事件@touchmove.prevent 给遮罩层...
DuiLib学习(六)-自绘标题栏
doooooooollly的博客
06-25 2105
教程:http://www.cnblogs.com/Alberl/p/3343763.html 这一节信息量有点大: ①XML用Notepad++编辑 ②Window 的 caption 属性表明标题栏的pos ③Window的sizebox为边框的宽度，用来调整窗口大小 ④上下窗口选取的bkcolor2 需一直，不然重绘窗口时会闪屏 ⑤Window的mininfo属性表明这个窗口最小
如何禁止双击标题栏不改变窗口的大小和拖动标题栏窗口不移动的问题
微浪游戏
08-03 3556
做项目中遇到了这两个问题，主要是对非客户区的处理，现在把做法写出来， 第一个问题：只要禁止了非客户区的双击消息即可实现 （1）添加WM_NCLBUTTONDBLCLK事件处理函数 （2）在相应的函数处理中注释掉一下代码，不然父类默认处理 第二个问题做法有很多，我这里还要求最小按钮和关闭按钮可用，不点击最小化按钮和关闭按钮就禁止单击事件，我的做法如下 （1）添加点击
duilib半透明异形窗口_修改WM_PAINT
ku625的专栏
05-21 3348
看到网上有用duilib实现半透明异形窗口的例子,  把代码下回来之后,发现是用两个窗口重叠 在一起做成的. 本人不是很喜欢, 于是到网上查了UpdateLayeredWindow(...)的用法, 试着在duilib里使用. 先看结果吧,上图: UpdateLayeredWindow(...)这个函数是有限制的. 1.当前窗口样式必须是WS_EX_LAYERED,不能是WS_CHIL
Textarea 高度自适应 根据内容自适应高度
晖轩大师
01-10 9750
IE支持 onPropertyChange 火狐支持oninput Firefox有个oninput事件效果和onPropertyChange一样，所以同时加上oninput和onPropertyChange问题就解决 -->           function init() {         // 设置textarea自适应高度         var handle
table行的上移下移 上下移动
晖轩大师
11-30 5287
$(document).ready(function () {         $('.moveup').bind('click', function (e) {             var obj = $(e.target).closest('tr');             c_pre($(obj[0]));         });         $('.movedown')
Vue中iframe拖拽卡顿问题解决方案：透明遮罩层优化
遵循上述解决思路，结合实际的vue代码，如添加遮罩层的部分，可以帮助改善iframe嵌套下拖拽操作的性能问题，提供更流畅的用户体验。务必注意，具体实现可能需要根据项目需求和浏览器兼容性进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值