Hello in this video i try to show all steps for creating popup on my website, but this don’t work https://youtu.be/FmK2YnmR9oo
my javascript code
function togglePopup() {
document.getElementById(“431”).classList.toggle(“active");
}
Hi Davido,
this doesn’t work for several reasons.
- is your popup template even present on your test page?
- you are trying to address it via the template ID, which only has a function within the Bricks templates. The ID of your “popup” container is completely different.
- do you have any function within your scripts that opens your popup container in a lightbox?
This will never work like this 
If I were you, I would go for a popup plugin, as long as there is no native popup included in Bricks.
By the way, this also applies to the GDPR solution, which is always the better choice with an appropriate plugin (I’ve had good experiences with Real Cookie Banner or Borlabs Cookie), because these plugins not only passively show a message but actively block “critical” connections. A simple hint that cookies or certain services are used is not enough…
Best regards,
timmse
If i copy all code and paste in code block from bricks, use code from this video: Build a Popup With JavaScript - YouTube
All works
This means that everything can work, you just have no desire to help with this solution, and a plugin for only one option is not the most correct solution.
HTML (I add space between < an name selector):
< button data-modal-target="#modal">Open Modal
< div class=“modal” id=“modal”>
< div class=“modal-header”>
< div class=“title”>Example Modal
< button data-close-button class=“close-button”>×
< /div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis quae quia soluta totam doloribus quos nesciunt necessitatibus, consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur sint officiis perferendis atque! Voluptatem maxime eius eum dolorem dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
< /div>
< /div>
< div id=“overlay”>
CSS:
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 200ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
JS:
const openModalButtons = document.querySelectorAll(’[data-modal-target]’)
const closeModalButtons = document.querySelectorAll(’[data-close-button]’)
const overlay = document.getElementById(‘overlay’)
openModalButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
overlay.addEventListener(‘click’, () => {
const modals = document.querySelectorAll(’.modal.active’)
modals.forEach(modal => {
closeModal(modal)
})
})
closeModalButtons.forEach(button => {
button.addEventListener(‘click’, () => {
const modal = button.closest(’.modal’)
closeModal(modal)
})
})
function openModal(modal) {
if (modal == null) return
modal.classList.add(‘active’)
overlay.classList.add(‘active’)
}
function closeModal(modal) {
if (modal == null) return
modal.classList.remove(‘active’)
overlay.classList.remove(‘active’)
}
Have you tried replacing the text with the template shortcode?
Hi Davido,
I don’t think I lack the desire to help you - if that’s how you see it, go for it.
But then please explain to me how I can even begin to guess what you are doing based on your Youtube video and the one line of javascript when you leave out 99% of all other information? I’m sorry, but so it is incredibly difficult to help even rudimentary…
You say that the code works in general. So please, as @zestjosh suggested, replace the dummy text with the template shortcode of your popup template, so that the content of your template is displayed in the popup. In theory, this should work.
I found another way, the problem is that the markup of the button is like a link and not a button, that’s what I mean
bricks button:
< a class=“bricks-button bricks-background-primary bricks-link-type-external” href="#modal" data-modal-target=“Open Modal”> < span >I am a button< /span >
i use in code block:
< button class=“button_1” data-modal-target="#modal">Open Modal< /button>
Support write me to use:
I try, but in this video I demonstrate my problem: popup in bricks - YouTube
now my popup open when I click on code block button, but when I click to close popup on overlay is close, when I click on close button popup don’t close
The way I went will allow me to create a popup as needed, there is only one problem left with closing from the button
Your close button is not working because of this error:
When you´re working with Javascript, always look after console errors. That works even faster than our support 
Btw, the code you posted here contains an incredible amount of errors (unclosed HTML tags, weird quotes) that make it unusable as-is 
1 Like
yes, if i delete more space between elements this is disapere on forum, you can see this code:
That's what the code element is for ;)
Who told you to remove the footer script? Remove the error, not the entire script…
There was another version of the pop-up script that has nothing to do with this.
Hmm… works for me - on the first try.
You´ve included the script above your button. Try to add your script block below your button/modal. Then it should really work… if not I will throw myself in front of the next bus
i have bad news… you must throw in front of the next bus : https://youtu.be/C6hKTbjIZH8
I can sent my admin login and password
if I copy all html, CSS and Java, all works, but why don’t work if use elements separate
Well, as you said earlier, I don’t want to help anyway…
And yes, I know that you sent login data. And that you wrote here in the forum. And that’s why I have to ask you to use only one channel in the future - either by mail or in the forum. Both will only lead to confusion (on our and your side). Thanks for your understanding 
Your script is still above your modal. Move it below, please!
Since we were both lucky that just no bus came by… 
I understood what you mean, you need to release the widget with the script below in the layers palette (for example, move it to the container with the popup) and yes it helped now I have a popup on the site.
Now I will look for a solution how to add the function to close the popup after clicking on the submit button
Also in your video with vimeo, you used a button made of bricks, what did you do with its settings, what causes this popup for you?
Also in your video with vimeo, you used a button made of bricks, what did you do with its settings, what causes this popup for you?
I found solution for button, I continue to found solution for submit button
@davidovmihail switching the trigger to a button link instead of an html button is pretty easy, you would benefit from taking a JavaScript course.
1 Like
I am a UI / UXdesigner, and as a developer I understand CSS and HTML, and JS is still difficult for me, while I am guiding lessons from YouTube