Как сделать модальное окно при нажатии на ссылку? Чтобы при нажатии на определенную ссылку открывалось окно с определенной картинкой?

Как сделать модальное окно при нажатии на ссылку? Чтобы при нажатии на определенную ссылку открывалось окно с определенной картинкой?

Само окно должно закрываться при нажатии мимо окна, без крестика в верхнем правом углу. Такого примера нигде не нашла... Может это слишком просто, но я только чайник, помогите пожалуйста!

(Бордеры-это чисто для себя)

Дополнительно:

Даже если "бордеры чисто для себя"... не умея в дизайн, можно встать на плечи гигантов и использовать в верстке готовый Bootstrap - будет как минимум не хуже, чем ничего.
Модальные окна и прочие элементы там есть из коробки.


+ Заказать

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Как сделать модальное окно при нажатии на ссылку? Чтобы при нажатии на определенную ссылку открывалось окно с определенной картинкой?Есть ответ
    • 07.04.2024
    Ответить

    Для создания модального окна при нажатии на ссылку и отображения определенной картинки, можно использовать следующий подход:

    1. Необходимо создать HTML разметку для модального окна и указанной картинки. Например:

    ```html

    ```

    2. Далее, добавим стили для модального окна:

    ```html

    .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    }

    .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    }

    .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    }

    .close:hover,
    .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
    }

    ```

    3. Теперь, добавим скрипт JavaScript для открытия модального окна при нажатии на ссылку и отображении нужной картинки:

    ```html

    // Получаем ссылку и картинку
    var link = document.getElementById('linkId'); // заменить 'linkId' на id вашей ссылки
    var modal = document.getElementById('myModal');
    var modalImg = document.getElementById("modalImg");

    // Открываем модальное окно при клике на ссылку
    link.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.href; // Подставляем ссылку картинки из атрибута href ссылки
    }

    // Закрываем модальное окно при клике на крестик
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
    modal.style.display = "none";
    }

    ```

    4. Наконец, в HTML разметке добавляем ссылку с указанием id и путь к картинке:

    ```html
    Открыть модальное окно
    ```

    Теперь, при клике на данную ссылку, будет открываться модальное окно с указанной картинкой. Не забудьте подставить свои значения id элементов и пути к картинке.

Оставить комментарий