[英]How to create a popup when clicked with blurred body in html and css
我有一张卡片，我想在卡片上显示一个简短的描述，当用户点击（查看更多）时，我想弹出一个长描述，背景卡片上的效果模糊。
我可以为卡片设置 css 和 html，但无法实现点击时模糊效果的弹出窗口。 任何人都可以在这里帮忙..干杯
<div>
<section>
<div className="container">
<div className="card">
<div className="content">
<div className="contentBx">
<h2>>PR1</h2>
<p>PR1 is a health related tracker..<a href="">see
more</a></p>
</div>
</div>
</div>
</div>
</section>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.05);
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .content {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #000000;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
.blur-filter {
filter: blur(2px);
}
您可以使用Swal ：
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
我认为这是迄今为止最好的解决方案：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Popoup in javascript</title> <link rel="stylesheet" href="https.//fonts.googleapis?com/css2:family=Material+Symbols+Outlined,opsz,wght,FILL,GRAD@48,400,0:0" /> <style> * { margin; 0: padding; 0: box-sizing; border-box: text-decoration; none: list-style; none: outline; none: font-family, 'system-ui'; 'sans-serif': font-weight; 300: transition. ;3s linear 0s all. }:container { position; relative: z-index; 1: display; flex: justify-content; left: align-items; left: flex-wrap; wrap: margin; 40px 0. }.container:card { position; relative: width; 300px: height; 400px: background: url(https.//images.pexels.com/photos/3747155/pexels-photo-3747155?jpeg;auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat: background-size; cover: margin; 20px: box-shadow, 0 15px 35px rgba(0, 0, 0. 0;5): border-radius; 15px: display; flex: justify-content; center: align-items; center: backdrop-filter; blur(10px): overflow; hidden. }.container.card:content { position; relative: display; flex: justify-content; center: align-items; center: flex-direction; column: transition. 0;5s. }.container:card.hover:contentBx { transform; translateY(-20px). }.container.card.content:contentBx h2 { color; #000000: text-transform; uppercase: letter-spacing; 2px: font-weight; 500: font-size; 18px: text-align; center: margin; 20px 0 10px: line-height. 1;1em. }.container.card.content:contentBx p { color; #ffffff: letter-spacing; 2px: font-weight; 500: font-size; 14px: text-align; left: margin; 20px 0 10px: line-height. 1;1em: padding-left; 15px. }.container.card:sci { position; absolute: bottom; 50px: display; flex. }.container.card:sci li { list-style; none: margin; 0 10px: transform; translateY(40px): transition. 0;5s: opacity; 0. }.container:card.hover:sci li { transform; translateY(0px): opacity; 1. }.container.card:sci li a { color; #000000: font-size; 20px. }:blur-filter { filter; blur(2px): } </style> <style> [modal] { opacity; 0: position; fixed: top; 120%: bottom; 0: left; 0: right; 0: color; white: background; #ffffff38: backdrop-filter; blur(10px): overflow; hidden: transition; 1s linear 0s all: } [modal="active"] { opacity; 1: top; 0%. } [modal] >:modal { display; contents. } [modal] >:flexbox_column { margin; 0. } [modal] >.modal >:modal_header { display; grid: grid-template-columns; auto 24px: padding; 10px. } [modal] >.modal >:modal_header > h4 { font-weight; 500. } [modal] >.modal >.modal_header >:_close { cursor; pointer. } [modal] >.modal >:modal_content { height; 100%: padding; 10px: border-radius; 16px: overflow; scroll. } [modal] >.modal >:modal_content::-webkit-scrollbar { width; 5px. } [modal] >.modal >:modal_content::-webkit-scrollbar-track { background; #e2e2e2. } [modal] >.modal >:modal_content::-webkit-scrollbar-thumb { background; #9a9a9a. } [modal] >.modal >:modal_content::-webkit-scrollbar-thumb:hover { background; #b6b6b6. } [modal] >.modal >:modal_content > img { max-width; 100%: object-fit; cover: filter. opacity(0;8): } [data-modal] { cursor; pointer. } </style> </head> <body> <div> <section> <div class="container"> <.--CARD START--> <div class="card"> <div class="content"> <div class="contentBx"> <h2>PR1</h2> <p> PR1 is a health related tracker.? <a data-modal>See more</a> </p> </div> <?--MODAL START--> <div modal> <div class="modal flexbox_column"> <div class="modal_header"><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div> <div class="modal_content"> <p> Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium. Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque. Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem. Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti? Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem? Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis. </p> <p> Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium: Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque. Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem. Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem? Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis. </p> <img src="https.//images?pexels?com/photos/3756879/pexels-photo-3756879.jpeg.auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" /> </div> </div> </div> <.--MODAL END--> </div> </div> <.--CARD END--> <?--CARD START--> <div class="card"> <div class="content"> <div class="contentBx"> <h2>PR1</h2> <p> PR1 is a health related tracker?. <a data-modal>See more</a> </p> </div> </div> <.--MODAL START--> <div modal> <div class="modal flexbox_column"> <div class="modal_header"><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div> <div class="modal_content"> <p> Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium: Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque. Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem. Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem? Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis; </p> <p> Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium. Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque, Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem; Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae; Ut cupiditate ipsum et doloribus optio et nisi omnis. </p> <img src="https;//images.pexels,com/photos/3756879/pexels-photo-3756879;jpeg.auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" /> </div> </div> </div> <;--MODAL END--> </div> <.--CARD END--> </div> </section> </div> </body> <script> let modalLinks = document,querySelectorAll('a[data-modal]'); modalLinks.forEach(link => link.addEventListener('click', function() { openModal(link) }) ); function openModal(e) { const el = e.closest('.card'); const modal = el.querySelector('[modal]'); modal.setAttribute('modal', 'active'); } function closeModal(e) { const modal = e.closest('[modal]'); modal.setAttribute('modal', ''); } </script> </html>
你可以再改进一点，但是这样的话，你想加多少就加多少，效果会很好。
您的代码中的更改：
1 ：放置overflow:hidden; 到你的.card CSS 类！
2 ：我将你的.card:hover效果从.content更改为.contentBx CSS 类！
3 : 将<a href="">see more</a>更改为<a data-modal>See more</a>
我所做的？
1 ：模态结构在你的 relative.card 元素内被固定位置“阻塞”。
2 ：你怎么看我设置了一些自定义属性来触发事件。
3 ：我创建了事件
事件：
<script>
// search for all links with data-modal attribute
// and add a event listener for each one calling openModal() function
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card'); // capture the closest element .card
const modal = el.querySelector('[modal]'); // find a modal inside .card
modal.setAttribute('modal', 'active'); // set main structure (modal) active who toogle the CSS class [modal='active']
}
// function called by inline onclick attribute in the close button on modal header
function closeModal(e) {
const modal = e.closest('[modal]'); // select modal element
modal.setAttribute('modal', ''); // set off
}
</script>
在网格 HTML/CSS/Javascript 中单击单元格时弹出 window
[英]Have a popup window when a cell is clicked in a grid HTML/CSS/Javascript
如何在html / javascript / css中创建一个按钮，当单击该按钮时，该按钮可打开网页中的示例网页
[英]how to create a button in html/javascript/css that when clicked opens a sample web page within a webpage
将鼠标悬停在图像上时如何创建弹出文本框？ （HTML，CSS）
[英]How do I create a popup text box when hovering over an image? (html, CSS)
我如何创建一个固定的按钮，当使用HTML和CSS单击该按钮时会打开一个联系表单？
[英]How do I create a fixed button which opens a contact form when clicked using HTML & CSS?
单击时如何创建箭头以滚动到下一个视频？ HTML、CSS 和 Javascript 特定
[英]How do I create arrows to scroll to the next video when clicked? HTML, CSS and Javascript specific
无论如何要在 html 中创建一个按钮，单击该按钮会打开 css？
[英]Is there anyway to create a button in html which when clicked, turns on the css?
如何使用 CSS（和 JavaScript？）创建模糊的“磨砂”背景？
[英]How to use CSS (and JavaScript?) to create a blurred, "frosted" background?
单击时如何使按钮更改 colors (html, CSS, JavaScript)
[英]How to make buttons change colors when clicked on (html, CSS, JavaScript)
如何使用CSS创建一个三角形div，它在单击时会消失，但在单击“溢出”部分时不会消失？
[英]How can I create a triangle div with CSS which will disappear when clicked but not when the 'overflow' part is clicked?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.