Приветствую, подскажите, есть шаблон сайта в котором присутствует кнопка всплывающего модального окна, возникла необходимость добавить еще одно такое окно с другим содержимым, как это можно сделать?
Вызов окна:
<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"}]}]}}
]);
Буду благодарен за помощь.