Pop Up Window

[Grisid]

Hello,

Is there any possibility to add a pop up window in order to add additional text of a project?

I mean just like in my "+ details" section of my website:

https://www.griseldaduch.com/fleuressence/

Thanks in advance

[mariusjopen]

Dear @Grisid
oh wow! Great flowers!
You can create a textbox and give it a special class. With CUSTOM CSS and JS, you can make it look and behave how you want.

best!

Marius

[Grisid]

hello

thank you :)

Could you please give me an example? I Created my text and gave it a special class. Which custom css and Js I need to add?
I will appreaciate a help.

Thanks in advance

[mariusjopen]

Dear @Grisid
then you need to create a button and hive it a class as well. Call it button.

Then you can use jQuery to display and show the other box when you click on the button.

See here under Binding Click Events:
https://laytheme.com/documentation.html#custom-javascript

https://jsfiddle.net/d6zf0n1b/
https://jsfiddle.net/lesson8/h4JXs/1/
http://jsfiddle.net/cEJtA/

https://stackoverflow.com/questions/25981198/how-to-hide-one-div-and-show-another-div-using-button-onclick/25981421

https://www.google.com/search?q=onclick+show+another+div+jquery&rlz=1C5CHFA_enDE881DE881&oq=onclick+show+another+div+jquery&aqs=chrome..69i57j0l3.4072j0j4&sourceid=chrome&ie=UTF-8

Hope that helps!

Best!

Marius

[Grisid]

Hello,

I created a button called "clickme".
Then I added in my Css desktop and mobile this:

.clickme a{
padding: 15px 20px;
display: inline-block;
background-color: #e8e8e8;
border-radius: 3px;
line-height: 1;
text-decoration: none;
border-bottom: none;
color: black;
opacity: 1;
white-space: nowrap;
}

.clickme a:hover{
background-color: #f0f0f0;
text-decoration: none;
border-bottom: none;
color: black;
opacity: 1;
}

Then I added jQuery to display and show the other box when you click on the button, just like that:

<script>
jQuery(document).on("click", ".clickme", function(event) {
console.log("yay!");
});
</script>

but I'm sure something is wrongg because when I want to click "+ more details" (which is my button with custom ID class called "clickme")

https://www.griseldaduch.com/fleuressence

there is no link to click.

What I'm doing wrong?

[mariusjopen]

Dear @Grisid

basically:

Button
a div with the class called button

Popup
a div with the class called popup

CSS

.popup {
     display: none;
}

.popup.active {
     display: block !important;
}

Javascript

jQuery(document).on("click", ".button", function(event) {
     jQuery('.popup').toggleClass('active');
});

I did not test it, but that is the way to go!

Best!

Marius