javascript - jQuery如何实现同一个遮罩层显示不同的内容？
页面有多个div元素，点击这些div元素将弹出一个遮罩层，遮罩层内显示所点击的对应的内容，请教大佬们该如何用jQuery实现？
具体如下图:
对应代码：
<div class="div-wrapper"> <div id="d1">div1</div> <div id="d2">div1</div> <div id="d3">div1</div> <div id="d4">div1</div></div>点击div元素弹出的遮罩层根据所点击的div显示对应的内容，如下图：
<div id="target"> <div class="content"> <div class="container"> <h1 class="title">div1</h1> <div class="description"> <p>Hello div1!</p> </div> </div> </div></div>因为后期会有多个div元素，请问大佬们能否做成数据串的形式，点击那个就把对应的数据插入到这个遮罩层框架内
共有5个答案
<!DOCTYPE html><html><head> <style> .div-wrapper { display: flex; } .div-wrapper div { border: 1px solid black; padding: 10px; margin: 10px; cursor: pointer; } #overlay { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } #overlay-content { background: white; padding: 20px; } </style></head><body> <div class="div-wrapper"> <div id="d1" onclick="handleDivClick(event)">div1</div> <div id="d2" onclick="handleDivClick(event)">div2</div> <div id="d3" onclick="handleDivClick(event)">div3</div> <div id="d4" onclick="handleDivClick(event)">div4</div> <div id="d5" onclick="handleDivClick(event)">div5</div> <!-- Add more div elements here --> </div> <div id="overlay"> <div id="overlay-content"></div> </div> <script> function handleDivClick(event) { var target = event.target; if (target.matches('div')) { showOverlay(target.innerText); } } function showOverlay(content) { var overlay = document.getElementById('overlay'); var overlayContent = document.getElementById('overlay-content'); overlay.style.display = 'flex'; overlayContent.innerText = content; } var overlay = document.getElementById('overlay'); overlay.onclick = function() { this.style.display = 'none'; }; </script></body></html>这样应该可以解决你的需求
<div class="div-wrapper> <div id="d1"> <div class="container hide" > <h1 class="title">d1</h1> <div class="description">Hello div1</div> </div> </div> <div> document.querySelectorAll(".div-wrapper>[id]").forEach(dom => { dom.onclick = (e) => { // 从页面拿到 DOM，直接输出 // 要写 node 很多 node const $temp = e.target.parentNode.querySelector(".hide")); const $dom = $($temp).copy(); // 从模板拿到 DOM，调整内容后输出 // 要写 json 数据源 const key = e.parentNode.id; const $temp = $("#template").copy(); $temp.querSelector('.title').innrText = dataList[key].title; $temp.querSelector('.description').innrText = dataList[key].description; // 丢到对应的dom document.querySelector("#mask>content").innerHTML = $dom; $("#mask").remolveClass('hide'); } })
简单实现了下~
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> <style> .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; } .modal-content { width: 500px; height: 300px; background-color: #fff; margin: 100px auto 0; border-radius: 5px; } </style> </head> <body> <div id="app"> <button data-id="1" onclick="getContent(this)">遮罩层1</button> <button data-id="2" onclick="getContent(this)">遮罩层2</button> <button data-id="3" onclick="getContent(this)">遮罩层3</button> </div> <div id="modal" class="modal"> <div id="modal-content" class="modal-content"></div> </div> </body> <script type="text/javascript"> // modal内容 const dataArray = [ {'id':1,'content':'遮罩层1内容'}, {'id':2,'content':'遮罩层2内容'}, {'id':3,'content':'遮罩层3内容'} ]; // 获取modal内容 function getContent(e) { // 获取data-id属性的值 const dataId = e.getAttribute('data-id'); // 使用dataId值查找相应的content const contentItem = dataArray.find(item => item.id == dataId); if (contentItem) { const content = contentItem.content; // 获取模态框元素 const modal = document.getElementById('modal'); const modalContent = document.getElementById('modal-content'); // 设置模态框内容 modalContent.innerHTML = content + '<button onclick="closeModal()">关闭</button>'; // 显示模态框 modal.style.display = 'block'; } } // 关闭 function closeModal() { const modal = document.getElementById('modal'); modal.style.display = 'none'; } </script></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="div-wrapper"> <div id="d1">div1</div> <div id="d2">div2</div> <div id="d3">div3</div> <div id="d4">div4</div> </div> <div id="target"> <div class="content"> <div class="container"> <h1 class="title">div1</h1> <div class="description"> <p>Hello div1!</p> </div> </div> </div> </div></body><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>$('.div-wrapper').children().each(function() { let text = $(this).text() $(this).on('click', function() { console.log(text) $('#target .title').text(text) $('#target .description').text(`Hello ${text}`) })})</script><style>.div-wrapper>div { display: flex; align-items: center; justify-content: center; width: 100px; height: 40px; border: 1px solid black; margin: 10px; cursor: pointer;}</style></html>
$("#d1").click(function(){ $(".title").html(标题1") $(".description").html("<p>内容一</p>") // 显示遮罩 $("#target").show();})$("#d2").click(function(){ $(".title").html(标题2") $(".description").html("<p>内容二</p>") // 显示遮罩 $("#target").show();})-
本文向大家介绍Jquery实现遮罩层的方法，包括了Jquery实现遮罩层的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Jquery实现遮罩层的方法。分享给大家供大家参考。具体如下： 1、假设#main为页面body中的最外层Div标签 2、背景被遮罩后，显示的弹出窗（默认是不显示的，所包含的CSS这里就不贴了）： 3、在script.js中定义遮罩函数以及弹出窗操作函数，当然scr
-
本文向大家介绍jquery实现简单的遮罩层，包括了jquery实现简单的遮罩层的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了jquery遮罩层，包括遮罩层的不同样式实现、mask实现遮罩层等，分享给大家供大家参考，具体内容如下 一、jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式： 1.2
-
本文向大家介绍jQuery遮罩层实现方法实例详解(附遮罩层插件)，包括了jQuery遮罩层实现方法实例详解(附遮罩层插件)的使用技巧和注意事项，需要的朋友参考一下 本文实例分析了jQuery遮罩层实现方法。分享给大家供大家参考，具体如下： 1 背景半透明遮罩层样式 需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式： 2 jQuery实现遮罩 3 提示框 遮罩的目
-
本文向大家介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】，包括了JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现的弹出遮罩层特效。分享给大家供大家参考，具体如下： 这篇给大家分享一个简单的遮罩层特效，先上效果图。 代码： 页面中有一个表格，一个隐藏的弹出层，当点击查看按钮，
-
介绍 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。 引入 import { createApp } from 'vue'; import { Overlay } from 'vant'; const app = createApp(); app.use(Overlay); 代码演示 基础用法 <van-button type="primary" text="显示遮罩层" @
-
Mask 遮罩层 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过show参数配置是否显示遮罩 遮罩被点击时，会发送一个click事件，如不需要此事件，请设置mask-click-able参数为false <template> <u-mask :show="show" @click="show = false">