Задать вопрос
boypush
@boypush
Geek

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

Приветствую, подскажите, есть шаблон сайта в котором присутствует кнопка всплывающего модального окна, возникла необходимость добавить еще одно такое окно с другим содержимым, как это можно сделать?

Вызов окна:
<a class="color-link navlink w-nav-link" data-ix="open-popup" href="#">Вход</a>


Сам элемент:
<div class="popup" data-ix="hide-popup">
        <div class="popup-modal" data-ix="hide-modal">
            <div class="content-column-block popup-column-block">
                <div class="popup-title">Вход</div>
                <div class="popup-title subtitle w-hidden-small w-hidden-tiny">The perfect app that solves the challenges people like you face very day. We understand.</div>
                <div class="form w-form">
                    <div class="success w-form-done">
                        <div>Thank you! Your submission has been received!</div>
                    </div>
                    <div class="error w-form-fail">
                        <div>Oops! Please try again.</div>
                    </div>
                </div><a class="maybe-later-link" data-ix="close-popup" href="#">Закрыть окно</a></div>
            <div class="popup-column-block">
                <div class="popup-image-overlay-block">
                    <div class="overlay-title">Questions?</div>
                    <div class="overlay-title subtitle">You can also call us on +31 999999999</div>
                </div>
            </div>
        </div>
        <a class="close-popup-block w-inline-block" data-ix="close-popup" href="#"></a>
    </div>


JS
Webflow.require('ix').init([
  {"slug":"fade-in-scroll-1","name":"Fade in scroll 1","value":{"style":{"opacity":0,"x":"0px","y":"25px","z":"0px"},"triggers":[{"type":"scroll","offsetBot":"10%","stepsA":[{"wait":"300ms"},{"opacity":1,"transition":"opacity 350ms ease 0, transform 350ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"fade-in-scroll-2","name":"Fade in scroll 2","value":{"style":{"opacity":0,"x":"0px","y":"25px","z":"0px"},"triggers":[{"type":"scroll","offsetBot":"10%","stepsA":[{"wait":"400ms"},{"opacity":1,"transition":"opacity 350ms ease 0, transform 350ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"fade-in-scroll-3","name":"Fade in scroll 3","value":{"style":{"opacity":0,"x":"0px","y":"25px","z":"0px"},"triggers":[{"type":"scroll","offsetBot":"10%","stepsA":[{"wait":"500ms"},{"opacity":1,"transition":"opacity 350ms ease 0, transform 350ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"page-load-1","name":"Page load 1","value":{"style":{"opacity":0,"x":"0px","y":"10px","z":"0px"},"triggers":[{"type":"load","stepsA":[{"wait":"350ms"},{"opacity":1,"transition":"opacity 500ms ease 0, transform 500ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"page-load-2","name":"Page load 2","value":{"style":{"opacity":0,"x":"0px","y":"-10px","z":"0px"},"triggers":[{"type":"load","stepsA":[{"wait":"350ms"},{"opacity":1,"transition":"opacity 500ms ease 0, transform 500ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"page-load-3","name":"Page load 3","value":{"style":{"opacity":0,"x":"-10px","y":"0px","z":"0px"},"triggers":[{"type":"load","stepsA":[{"wait":"600ms"},{"opacity":1,"transition":"opacity 500ms ease 0, transform 500ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"page-load-4","name":"Page load 4","value":{"style":{"opacity":0,"x":"10px","y":"0px","z":"0px"},"triggers":[{"type":"load","stepsA":[{"wait":"600ms"},{"opacity":1,"transition":"opacity 500ms ease 0, transform 500ms ease 0","x":"0px","y":"0px","z":"0px"}],"stepsB":[]}]}},
  {"slug":"tab-button","name":"Tab Button","value":{"style":{},"triggers":[{"type":"tabs","selector":".tab-button-icon-block","descend":true,"preserve3d":true,"stepsA":[{"transition":"transform 200 ease 0","x":"0px","y":"-6px","z":"0px"}],"stepsB":[{"transition":"transform 200 ease 0","x":"0px","y":"0px","z":"0px"}]},{"type":"tabs","selector":".tab-button-title","descend":true,"preserve3d":true,"stepsA":[{"transition":"transform 200 ease 0","x":"0px","y":"6px","z":"0px"}],"stepsB":[{"transition":"transform 200 ease 0","x":"0px","y":"0px","z":"0px"}]}]}},
  {"slug":"close-popup","name":"Close Popup","value":{"style":{},"triggers":[{"type":"click","selector":".popup","stepsA":[{"wait":"200ms"},{"opacity":0,"transition":"transform 200 ease 0, opacity 200 ease 0"},{"display":"none"}],"stepsB":[]},{"type":"click","selector":".popup-modal","preserve3d":true,"stepsA":[{"opacity":0,"transition":"transform 200 ease 0, opacity 200 ease 0","rotateX":"0deg","rotateY":"90deg","rotateZ":"0deg"}],"stepsB":[]}]}},
  {"slug":"hide-modal","name":"Hide Modal","value":{"style":{"opacity":0,"rotateX":"0deg","rotateY":"90deg","rotateZ":"0deg"},"triggers":[]}},
  {"slug":"hide-popup","name":"Hide Popup","value":{"style":{"display":"none","opacity":0},"triggers":[]}},
  {"slug":"open-popup","name":"Open Popup","value":{"style":{},"triggers":[{"type":"click","selector":".popup-modal","preserve3d":true,"stepsA":[{"wait":"200ms"},{"opacity":1,"transition":"transform 500ms ease-in-out-quint 0, opacity 500ms ease-in-out-quart 0","rotateX":"0deg","rotateY":"0deg","rotateZ":"0deg"}],"stepsB":[]},{"type":"click","selector":".popup","stepsA":[{"display":"flex","opacity":1,"transition":"opacity 200 ease 0"}],"stepsB":[]}]}},
  {"slug":"hide-fixed-navbar","name":"Hide Fixed Navbar","value":{"style":{"display":"none","opacity":0,"x":"0px","y":"-30px","z":"0px"},"triggers":[]}},
  {"slug":"show-fixed-navbar","name":"Show Fixed Navbar","value":{"style":{},"triggers":[{"type":"scroll","selector":".fixed-navbar","preserve3d":true,"stepsA":[{"opacity":0,"transition":"transform 200 ease 0, opacity 200 ease 0","x":"0px","y":"-30px","z":"0px"},{"display":"none"}],"stepsB":[{"display":"block","opacity":1,"transition":"transform 300ms ease 0, opacity 300ms ease 0","x":"0px","y":"0px","z":"0px"}]}]}}
]);


Буду благодарен за помощь.
  • Вопрос задан
  • 948 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы