How to create a popup when clicked with blurred body in html and 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

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

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

score 1 · Accepted Answer · answered Dec 25 '22 at 08:04

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>

Thanks for the great answer.. without image i am trying.. not able to hide the background text(PR 1 ...) when modal is opened. any idea ? — Shankar Panda, Dec 26 '22 at 03:42
i am trying to incorporate this html in my app.js. somehow its not working, any idea how to make it compatible? — Shankar Panda, Dec 26 '22 at 10:59
@ShankarPanda I dont know what you mean, im learning javascript, i dont uderstand when you say incorporate this html into your app.js .. for what i know whe can incorporate javascript files at html file, not reverse, like html into js, not impossible, but not adequate.. what you mean when you say that? do it all programmaticaly in nodejs or something? — Edvaldo Filho, Dec 26 '22 at 14:14
sorry for the confusion..I am a data engineer and very new to front end dev. actually i am working on an application which is in react. so it has the files like app.js, home.js and all. In app.js i have written div's to create container and cards. till then i am able to do it but now to show description your solution was best but html script does not work inside the app.js. — Shankar Panda, Dec 27 '22 at 03:31
No problem, i got it, im dont know nothing about react, but i search and found [this](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) maybe help you ! — Edvaldo Filho, Dec 27 '22 at 09:58
Fiho , this html does not work in firefox,,any idea for workaround ? — Shankar Panda, Jan 04 '23 at 04:22

score 0 · Answer 2 · answered Dec 25 '22 at 05:06

0

You can use Swal:

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

answered Dec 25 '22 at 05:06

thecodingsage

37
7

swal is to alert.without using swal , how can we open a text box pop up ? – Shankar Panda Dec 25 '22 at 06:12

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

2 Answers2