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

Time：12-25

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

CodePudding user response：

You can use Swal:

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

CodePudding user response：

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 >
                <!--CARD START-->
                <div >
                    <div >
                        <div >
                            <h2>PR1</h2>
                            <p>
                                PR1 is a health related tracker..
                                <a data-modal>See more</a>
                            </p>
                        </div>
                        <!--MODAL START-->
                        <div modal>
                            <div >
                                <div ><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" >expand_more</span></div>
                                <div >
                                    <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 >
                    <div >
                        <div >
                            <h2>PR1</h2>
                            <p>
                                PR1 is a health related tracker..
                                <a data-modal>See more</a>
                            </p>
                        </div>
                    </div>
                    <!--MODAL START-->
                    <div modal>
                        <div >
                            <div ><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" >expand_more</span></div>
                            <div >
                                <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>

Page link：https//www.codepudding.com/Mobile/653226.html

Prev:How can I overlay text behind the user input in an input element?
Next:I want to have 3 items on the right and 1 item on the left using flexbox,
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding