js可以做出有取消键的弹窗视频吗

时间: 2024-04-02 14:37:37 浏览: 79

JS实现可拖曳、可关闭的弹窗效果

实现一个可拖曳、可关闭的弹窗效果是前端开发中常见的需求，这种效果允许用户对弹窗进行操作，增加了用户的交互体验。下面是根据提供的信息，详细介绍如何使用JavaScript（JS）实现这种效果的关键知识点。 ### 弹窗的HTML结构需要构建基本的HTML结构来承载弹窗内容。在本例中，弹窗被设计为点击页面上的某个元素（例如按钮）时触发，弹窗背景层（遮罩层）以及弹窗内容层是独立的元素。 ```html <div class="mybody"> <div class="botton" id="testClick">点击测试</div>  <div id="cwxWd"> <div id="cwxCn">  <div><img src="//***/images/logo.gif" class="imgd"/></div> </div> </div>  <div id="cwxBg"></div> </div> ``` ### 弹窗的样式CSS 通过CSS给弹窗进行样式设计，如固定位置、尺寸和z-index。同时对遮罩层进行样式设计，使其在点击时可以触发放大效果。 ```css * { margin: 0; padding: 0; } body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; margin: 25px 0; background: #eee; } .botton { color: #F00; cursor: pointer; } .mybody { width: 600px; margin: 0 auto; height: 1500px; border: 1px solid #ccc; padding: 20px 25px; background: #fff; } #cwxWd { position: absolute; display: none; border: 10px solid #CCC; padding: 10px; background: #FFF; z-index: 1500; } #cwxBg { position: absolute; display: none; background: #000; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; } #cwxCn { background: #FFF; display: block; } .imgd { width: 400px; height: 300px; } ``` ### JavaScript实现可拖曳功能使用JavaScript来实现弹窗的拖曳功能，这里需要给弹窗内容层添加`mousedown`、`mousemove`和`mouseup`事件监听器，实现鼠标的拖拽效果。 ```javascript var cwxbox = {}; cwxbox.box = function() { var bg, wd, cn, ow, oh, o = true, time = null; return { show: function(c, t, w, h) { if (o) { bg = document.createElement('div'); bg.id = 'cwxBg'; wd = document.createElement('div'); wd.id = 'cwxWd'; cn = document.createElement('div'); cn.id = 'cwxCn'; document.body.appendChild(bg); document.body.appendChild(wd); wd.appendChild(cn); bg.onclick = cwxbox.box.hide; window.onresize = this.init; window.onscroll = this.scrolls; o = false; } // 其他代码... // 拖拽功能的实现 wd.onmousedown = function(e) { e.preventDefault(); ow = e.clientX; oh = e.clientY; document.onmousemove = function(e) { e.preventDefault(); wd.style.left = (e.clientX - ow) + 'px'; *** = (e.clientY - oh) + 'px'; }; }; document.onmouseup = function() { document.onmousemove = null; }; } }; }(); ``` ### 弹窗的关闭与遮罩层效果弹窗的关闭功能可以通过为遮罩层添加点击事件来实现，当点击遮罩层的时候，弹窗消失。遮罩层的变暗效果可以通过设置其CSS的透明度和背景色来实现。 ```javascript bg.onclick = cwxbox.box.hide; // 关闭弹窗的函数 cwxbox.box.hide = function() { bg.style.display = 'none'; wd.style.display = 'none'; // 清除可能存在的事件监听器 document.onmousemove = null; document.onmouseup = null; }; ``` ### 总结通过上述方法，我们就实现了一个可拖曳、可关闭的弹窗效果。此效果的实现涉及了HTML、CSS和JavaScript的基本使用，包括DOM操作、事件监听以及样式的动态调整。在实际应用中，还可以根据需求进一步优化用户体验，比如增加动画效果、响应式设计等。这些知识点可以帮助前端开发者在开发富交互式的Web应用时更加得心应手。

可以使用 JavaScript 和 CSS 来实现这个功能。下面是一个实现有取消键的弹窗视频的示例代码： ```html <!DOCTYPE html> <html> <head> <title>弹窗视频示例</title> <style> /* 蒙层样式 */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; } /* 弹窗样式 */ .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 640px; height: 360px; background-color: #fff; border-radius: 5px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } /* 视频样式 */ .video { width: 100%; height: 100%; object-fit: cover; } /* 关闭按钮样式 */ .close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background-image: url('cancel.png'); /* 取消键图片 */ background-size: cover; cursor: pointer; } </style> </head> <body>  <button id="play_button">播放视频</button>  <div class="overlay"> <div class="modal"> <video class="video" src="video.mp4"></video> <div class="close"></div> </div> </div> <script> // 获取元素 const overlay = document.querySelector('.overlay'); const modal = document.querySelector('.modal'); const video = document.querySelector('.video'); const close = document.querySelector('.close'); const playButton = document.querySelector('#play_button'); // 点击播放按钮，显示弹窗和视频 playButton.addEventListener('click', function() { overlay.style.display = 'block'; modal.style.display = 'block'; video.play(); }); // 点击关闭按钮或蒙层，隐藏弹窗和视频 function hideModal() { overlay.style.display = 'none'; modal.style.display = 'none'; video.pause(); } close.addEventListener('click', hideModal); overlay.addEventListener('click', hideModal); // 阻止点击弹窗时隐藏弹窗 modal.addEventListener('click', function(event) { event.stopPropagation(); }); </script> </body> </html> ``` 在上面的代码中，我们使用了一个蒙层和一个弹窗来实现弹窗视频的效果。点击播放按钮时，会显示蒙层和弹窗，并且开始播放视频；点击关闭按钮或蒙层时，会隐藏弹窗和视频。我们还可以阻止点击弹窗时隐藏弹窗，这样用户就可以在弹窗中看完整个视频。

阅读全文

js可以做出有取消键的弹窗视频吗

相关推荐

js实现弹窗效果

js 实现右下角视频弹窗

js 页面 弹窗 传值 接值

jQuery点击标签弹窗确认或取消删除被点击项

lhgDialog弹窗插件

给软件添加弹窗教程 软件添加弹窗

jquery弹窗提示插件

jQuery弹窗对话框插件

小巧的自定义弹窗.zip

网页模板——javascript+css实现的离开网站时显示模态弹窗特效源码.zip

移动端H5弹窗 完完整整，拿来即用

javascript window.confirm确认 取消对话框实现代码小结

网站离开提示模态弹窗特效的javascript实现

Vue2事件驱动弹窗实现与示例

紧急提示弹窗功能的实现与应用

Selenium控制浏览器窗口与弹窗

处理各类浏览器弹窗的方法

使用Python和Selenium-web自动化处理弹窗和多窗口

html的弹窗如何做出两个按钮

最新推荐

利用js+css简单实现半透明遮罩弹窗

JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

微信小程序实现漂亮的弹窗效果

VUE实现可随意拖动的弹窗组件

JS端基于download.js实现图片、视频时直接下载而不是打开预览

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

js 页面弹窗传值接值

给软件添加弹窗教程软件添加弹窗

移动端H5弹窗完完整整，拿来即用

javascript window.confirm确认取消对话框实现代码小结