[英]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.