Bricks now with Unlimited Sites & Upcoming Lifetime Price Increase

I try to create popup on click button, but don't work

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.

  1. is your popup template even present on your test page?
  2. 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.
  3. do you have any function within your scripts that opens your popup container in a lightbox?

This will never work like this :smiley:

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:
image

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 :wink:

Btw, the code you posted here contains an incredible amount of errors (unclosed HTML tags, weird quotes) that make it unusable as-is :smirk:

1 Like

yes, if i delete more space between elements this is disapere on forum, you can see this code:

I delete script from footer

but probleme not dispersare

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 :smiley:

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 :slight_smile:

Your script is still above your modal. Move it below, please!

Since we were both lucky that just no bus came by… :roll_eyes:

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