html弹出浮动层

最新推荐文章于 2024-03-13 09:59:37 发布
最新推荐文章于 2024-03-13 09:59:37 发布
阅读量5.4k 收藏
点赞数 2
分类专栏： 工作笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014151362/article/details/51614763
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LSN</title>
 <script src="/js/jquery/1.8.3/jquery-1.8.3.js"></script>
  <script src="/js/lib/vpiaotong.base.js"></script>
  <script src="/js/lib/vpiaotong.http.js"></script>
  <script src="/js/lib/eventUtils.js"></script>
  <script src="/js/views/manage/productManage.js"></script>
  <script src="/js/views/manage/menuJump.js"></script>
  <script type="text/javascript">
 
  $(function () {
     $(".showbtn").click(function () {
         $("#bg").css({
             display: "block", height: $(document).height()
         });
         var $box = $('.box');
         $box.css({
             //设置弹出层距离左边的位置
             left: ($("body").width() - $box.width()) / 2 - 20 + "px",
             //设置弹出层距离上面的位置
             top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + "px",
             display: "block"
         });
     });
     //点击关闭按钮的时候，遮罩层关闭
     $(".close").click(function () {
         $("#bg,.box").css("display", "none");
     });
 });
  </script>
  <style type="text/css">
.box{position:absolute;width:600px;left:50%;height:auto;z-index:100;background-color:#fff;border:1px #ddd solid;padding:1px;}
.box h2{height:25px;font-size:14px;background-color:#aaa;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.box h2 a{position:absolute;right:5px;font-size:12px;color:#fff;}
.box .list{padding:10px;}
.box .list li{height:24px;line-height:24px;}
.box .list li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.showbtn {font:bold 24px '微软雅黑';}
#bg{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
  </style>
</head>
<body>
 <p class="showbtn"><a href="javascript:void(0);">显示遮罩层</a></p>
<div id="bg"></div>
<div class="box" style="display:none">
    <h2>jQuery 学习交流<a href="#" class="close">关闭</a></h2>
    <div class="list">
        <ul>
            <li>我是狼少年</li>
            <li>我是狼少年</li>
            <li>我是欧巴</li>
        </ul>
    </div>
</div>
</body>
</html>
狼-少年
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的浮层移动效果,移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法...
weixin_39855869的博客
06-04 3334
在现在的前端页面中，尤其是移动端，经常会需要将或者是模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。“回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。...回复主题...实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮在最下方为例(悬浮同理)，当页面滑到最下方的时候，由于是fixed...
html制作浮层,Div层悬浮实现HTML5 Canvas背景动画
weixin_39610631的博客
06-24 839
在日常的学习中我接触到一些HTML5 Canvas动画，在开发 tiomg.org 太美在线工具网站 的时候，想将这些震撼或小清新的动画融合到工具网站中，这样可以使原本单调的网页看起来丰富和更有设计感。网站发布后，有程序开发的小伙伴和站长询问怎么实现的，我也乐于分享将使用的开源组件和实现告诉大家。有些同学还是不太明白，我答应后面写一篇博客来的。前几个月一直focus在网站的一些新功能上和帮忙解决一...
jquery弹出层鼠标点击弹出层可浮动在屏幕滚动
11-10
jquery弹出层鼠标点击弹出层可浮动在屏幕滚动 jquery弹出层鼠标点击弹出层可浮动在屏幕滚动 jquery弹出层鼠标点击弹出层可浮动在屏幕滚动
微信小程序的浮动与定位，flex布局
最新发布
m0_74842053的博客
03-13 1081
示例代码: 运行结果图： 代码如下： 结果如图： 结果图： （2）进行绝对定位代码如下： 结果图： （3）进行相对定位： 代码： 结果如图： （4）进行固定定位代码如下： 结果如图： （1）容器属性 flex容器支持的属性有7种，如图：
简单的悬浮框（提示框）功能实现
weixin_43020107的博客
03-24 1372
本篇记录了原生简单的HTML+CSS+JQuery实现悬浮框（提示框）的功能。
html、css 实现网页弹出层
热门推荐
Zhangguohao666的博客
12-05 1万+
只使用html、css，一步步教你实现网页弹出登录窗口
html让层悬浮
我笔记
04-04 2869
1.悬浮在最上层 <div style="position:fixed;width:960px;height:30px;text-align:center;top:0px">HTML让层悬浮</div> 传说中的悬浮术 2.悬浮在最右侧 <div id="uu" style="width:400px; z-index:100; position:fix...
js.zip_js html 弹出层
09-20
一些常用的js实例，弹出层，浮动窗口，等
HTML5 基础级弹出浮动层代码.rar
07-10
HTML5 弹出框、可关闭的浮动层代码，弹出一个新的div，支持关闭功能，很简单，没有美化，样式如演示截图示，看上去比较基础，挺简单的样式。与传统的HTML弹出框几乎没啥区别，只不过是基于HTML5技术实现的。
4种用法的弹出框浮动层，可拖动.rar
07-10
4种用法的弹出框浮动层，可拖动，Ajax弹出层效果，一共有4种不同形式的弹出框效果，不过风格基本一样，示例截图只是其中一种风格，怎么样？还行吧？
jQuery实现点击按钮弹出可关闭层的浮动层插件
11-23
本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件。分享给大家供大家参考。具体如下： 这是一款由漫画Jquery弹出层插件改编而来，小鸟Js弹窗插件，按ESC可以关闭窗口。默认不带样式，大家可以根据自己的...
html弹出框+遮罩层
04-17
看到网上有很多伙伴在求这东西，这里发一个。
html5浮动层弹窗
01-30
这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html，十分灵活。另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的
点击弹出浮动层 弹出遮罩层
07-21
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
如何在html添加悬浮页面,如何设置悬浮窗口?
weixin_33658509的博客
06-04 5610
可以用FlashMX来制作，下面是教程用FlashMX制作拖动悬浮窗口在课件制作过程中，有些需要重点突出的知识点要在单独的画面中显示，并且要求可以拖动。这就是我们平时所说的可以拖动的悬浮窗口。笔者以Flash MX为课件制作平台，将实现方法与大家共享。此方法只用到一个SWF文件，主场景和悬浮窗口都包含在同一个文件中。首先将悬浮窗口隐藏起来，当主场景中的按钮按下之后，把悬浮窗口显示出来，这样，就显示...
js实现弹窗登录验证
hyty的博客
09-28 1万+
js实现弹窗登录验证 1.CSS隐藏的弹窗块 &amp;lt;style&amp;gt; #notClickDiv{ filter:alpha(Opacity=35);opacity:0.35; /*设置不透明度为35%*/ background:#000000; /*设置背景为黑色*/ position:absolute; /*设置定位方式为绝对位置*/ display:none...
html如何制作悬浮窗,使用js实现悬浮窗效果方法
weixin_39946355的博客
06-17 6557
很多网站效果，当页面向下滚动到某高度时候，导航栏或者其他会悬浮固定到顶部或某个位置，那么下面鹏仔就给大家简单介绍下css代码.show{position:fixed;top:0;}#nav{width:100%;height:60px;background:pink;}.box{height:2600px;width:100%;background:skyblue;}在style里...
点击文字或者按钮在本页面中弹出悬浮小窗口
MeiLiCongLin的博客
07-25 3616
代码】点击文字或者按钮在本页面中弹出悬浮小窗口。
html弹出窗口是浮动,JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
06-09
好的，下面是使用 JS 实现弹出浮动窗口的详细步骤： 1. HTML 结构 首先，我们需要在 HTML 中添加一个按钮，用于触发弹出浮动窗口的事件。同时，为了方便后续操作，我们需要在 HTML 中添加一个空的 div 元素，用于存放弹出浮动窗口的内容。 ```html <button id="open-btn">打开浮动窗口</button> <div id="float-window"></div> ``` 2. CSS 样式 接下来，我们需要为浮动窗口添加样式。这里我们使用绝对定位来实现浮动效果，同时添加一些基本的样式，如背景颜色、边框样式等。 ```css #float-window { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background-color: #fff; border: 1px solid #ccc; display: none; /* 默认隐藏 */ } ``` 3. JS 代码 最后，我们需要使用 JS 代码来实现弹出浮动窗口的功能。具体步骤如下： 1. 获取按钮元素和浮动窗口元素，并添加事件监听器。 ```javascript var openBtn = document.getElementById('open-btn'); var floatWindow = document.getElementById('float-window'); openBtn.addEventListener('click', function() { floatWindow.style.display = 'block'; }); ``` 2. 实现拖拽效果。 ```javascript var isDragging = false; // 是否正在拖动 var mouseOffset = { x: 0, y: 0 }; // 鼠标相对于浮动窗口的偏移量 floatWindow.addEventListener('mousedown', function(e) { isDragging = true; mouseOffset.x = e.pageX - floatWindow.offsetLeft; mouseOffset.y = e.pageY - floatWindow.offsetTop; }); document.addEventListener('mousemove', function(e) { if (isDragging) { floatWindow.style.left = e.pageX - mouseOffset.x + 'px'; floatWindow.style.top = e.pageY - mouseOffset.y + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); ``` 3. 实现关闭效果。 ```javascript var closeBtn = document.createElement('div'); closeBtn.innerHTML = '关闭'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '10px'; floatWindow.appendChild(closeBtn); closeBtn.addEventListener('click', function() { floatWindow.style.display = 'none'; }); ``` 最终的 JS 代码如下： ```javascript var openBtn = document.getElementById('open-btn'); var floatWindow = document.getElementById('float-window'); openBtn.addEventListener('click', function() { floatWindow.style.display = 'block'; }); var isDragging = false; // 是否正在拖动 var mouseOffset = { x: 0, y: 0 }; // 鼠标相对于浮动窗口的偏移量 floatWindow.addEventListener('mousedown', function(e) { isDragging = true; mouseOffset.x = e.pageX - floatWindow.offsetLeft; mouseOffset.y = e.pageY - floatWindow.offsetTop; }); document.addEventListener('mousemove', function(e) { if (isDragging) { floatWindow.style.left = e.pageX - mouseOffset.x + 'px'; floatWindow.style.top = e.pageY - mouseOffset.y + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); var closeBtn = document.createElement('div'); closeBtn.innerHTML = '关闭'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '10px'; floatWindow.appendChild(closeBtn); closeBtn.addEventListener('click', function() { floatWindow.style.display = 'none'; }); ``` 这样，我们就完成了使用 JS 实现弹出浮动窗口的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值