Как создать всплывающее окно при клике с размытым телом в html и css

У меня есть карта, и я хочу показать короткое описание на карте, и когда пользователь нажимает (увидеть больше), я хочу всплывающее окно с длинным описанием с размытым эффектом на фоновой карте.

Я бы смог установить css и html для карты, но не смог добиться всплывающего окна с размытым эффектом при нажатии. Может ли кто-нибудь помочь здесь .. ура

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

html css

25.12.2022 04:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать Swal:

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

swal для оповещения. Без использования swal, как мы можем открыть всплывающее текстовое окно?

— 25.12.2022 07:12

25.12.2022 06:06

Ответ принят как подходящий

Я думаю, что это лучшее решение на данный момент:

<!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; к вашему классу CSS .card!

2: Я меняю ваш эффект .card:hover с .content на .contentBx Класс CSS!

3 : Изменено это <a href = "">see more</a> на это <a data-modal>See more</a>

Что я делаю ?

1: И модальная структура «заблокирована» с фиксированной позицией внутри вашего относительного элемента .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>

Спасибо за отличный ответ .. без изображения я пытаюсь .. не могу скрыть фоновый текст (PR 1 ...) при открытии модального окна. Есть идеи ?

— 26.12.2022 04:42

не беда, нашел

— 26.12.2022 04:50

я пытаюсь включить этот html в свой app.js. почему-то он не работает, есть идеи, как сделать его совместимым?

— 26.12.2022 11:59

@ShankarPanda Я не знаю, что вы имеете в виду, я изучаю javascript, я не понимаю, когда вы говорите включить этот html в свой app.js .. потому что я знаю, как можно включать файлы javascript в html-файл, а не наоборот, как html в js, не невозможно, но не адекватно.. что вы имеете в виду, когда говорите это? сделать все это программно в nodejs или что-то в этом роде?

— 26.12.2022 15:14

извините за путаницу .. Я инженер данных и очень новичок в разработке внешнего интерфейса. на самом деле я работаю над приложением, которое реагирует. поэтому у него есть такие файлы, как app.js, home.js и все такое. В app.js я написал div для создания контейнера и карточек. до тех пор я могу это сделать, но теперь, чтобы показать описание, ваше решение было лучшим, но html-скрипт не работает внутри app.js.

— 27.12.2022 04:31

Нет проблем, я понял, я ничего не знаю о реакции, но я искал и нашел это, может быть, поможет вам!

— 27.12.2022 10:58

Фихо, этот html не работает в firefox, есть идеи для обходного пути?

— 04.01.2023 05:22

25.12.2022 09:04