stackoom
  简体   繁体   中英

How to create a popup when clicked with blurred body in html and css

 原文  2022-12-25 03:30:38  5   2    html/ css

Question

I have a card and i want to show a short desc on the card and when user clicks (see more) then want to popup with a long description with blurred effect on the background card.

I would able to put up css and html for the card but not able to achieve popup with blurred effect on click. Can anyone help here..cheers

<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);
}

2 answers

solution1
 0  2022-12-25 05:06:18

You can use Swal :

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

solution2
 0  2022-12-25 08:04:39

I think this is the best solution so far: 

 <,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>

You can improve that a bit more, but in this way, you can add as much as you want, will work fine.

Changes in your code:

1 : Put an overflow:hidden; to your.card CSS Class !

2 : I change your .card:hover effect from .content to .contentBx CSS Class !

3 : Changed this <a href="">see more</a> to this <a data-modal>See more</a>

What i do?

1 : And modal structure 'blocked' with fixed position inside your relative.card element.

2 : How you see i set some custom attributes to trigger events.

3 : I created the events

Events:

<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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Have a popup window when a cell is clicked in a grid HTML/CSS/Javascript how to create a button in html/javascript/css that when clicked opens a sample web page within a webpage How do I create a popup text box when hovering over an image? (html, CSS) How do I create a fixed button which opens a contact form when clicked using HTML & CSS? How do I create arrows to scroll to the next video when clicked? HTML, CSS and Javascript specific Is there anyway to create a button in html which when clicked, turns on the css? How to Make Popup with Blurred Background How to use CSS (and JavaScript?) to create a blurred, "frosted" background? How to make buttons change colors when clicked on (html, CSS, JavaScript) How can I create a triangle div with CSS which will disappear when clicked but not when the 'overflow' part is clicked?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM