Page 1 of 1

How to create a modal/popup when link is clicked?

Posted: Tue Jul 06, 2021 7:21 am
by lecarlb
Hello,

I need a simple modal popup when a link is clicked. I tried the example from the Bootstrap website but it didn't work because I don't know how to properly integrate it into Phoenix.

Thank you.

Re: How to create a modal/popup when link is clicked?

Posted: Tue Jul 06, 2021 7:30 am
by heatherbell
lecarlb wrote: Tue Jul 06, 2021 7:21 am I need a simple modal popup when a link is clicked.
There are a few examples that show how it is done in PRO Supporters Addons e.g. IIRC s02e06 Product Terms has a product_info module that has that behaviour.

Re: How to create a modal/popup when link is clicked?

Posted: Tue Jul 06, 2021 8:45 am
by lecarlb
heatherbell wrote: Tue Jul 06, 2021 7:30 am
lecarlb wrote: Tue Jul 06, 2021 7:21 am I need a simple modal popup when a link is clicked.
There are a few examples that show how it is done in PRO Supporters Addons e.g. IIRC s02e06 Product Terms has a product_info module that has that behaviour.
Thank you for your help. I'm still stuck. I don't know where to begin or where to place the code.

Re: How to create a modal/popup when link is clicked?

Posted: Tue Jul 06, 2021 10:30 pm
by lambro28
lecarlb wrote: Tue Jul 06, 2021 7:21 am
Thank you for your help. I'm still stuck. I don't know where to begin or where to place the code.
What page(s) do you want the pop to appear on?

Re: How to create a modal/popup when link is clicked?

Posted: Tue Jul 06, 2021 11:28 pm
by lecarlb
lambro28 wrote: Tue Jul 06, 2021 10:30 pm
lecarlb wrote: Tue Jul 06, 2021 7:21 am
Thank you for your help. I'm still stuck. I don't know where to begin or where to place the code.
What page(s) do you want the pop to appear on?
I just want it to pop up when a link is clicked. For example, "Learn more".

It will be in a header module.

Thank you.

Re: How to create a modal/popup when link is clicked?

Posted: Wed Jul 07, 2021 6:48 am
by zipurman
You could read this as it walks you through how to do this in bootstrap.
https://getbootstrap.com/docs/4.6/components/modal/

Re: How to create a modal/popup when link is clicked?

Posted: Wed Jul 07, 2021 7:06 am
by lecarlb
zipurman wrote: Wed Jul 07, 2021 6:48 am You could read this as it walks you through how to do this in bootstrap.
https://getbootstrap.com/docs/4.6/components/modal/
Thanks. I read that. My issue is where to place that code. Then I know there's some .js that goes along with it. My guess is to place both pieces of code in the module.

Re: How to create a modal/popup when link is clicked?

Posted: Wed Jul 07, 2021 9:28 am
by Fiber
lecarlb wrote: Wed Jul 07, 2021 7:06 am My issue is where to place that code. Then I know there's some .js that goes along with it. My guess is to place both pieces of code in the module.
Why not copy includes/modules/content/header/cm_header_buttons.php and the files associated with it? Rename to the new situation..you don't need part of the code in the template file anymore and delete it and replace the code for the popup, translate properly en turn on in the admin en no core changes :-)

Re: How to create a modal/popup when link is clicked?

Posted: Wed Jul 07, 2021 3:04 pm
by lecarlb
Fiber wrote: Wed Jul 07, 2021 9:28 am
lecarlb wrote: Wed Jul 07, 2021 7:06 am My issue is where to place that code. Then I know there's some .js that goes along with it. My guess is to place both pieces of code in the module.
Why not copy includes/modules/content/header/cm_header_buttons.php and the files associated with it? Rename to the new situation..you don't need part of the code in the template file anymore and delete it and replace the code for the popup, translate properly en turn on in the admin en no core changes :-)
I'll try that. Thank you

Re: How to create a modal/popup when link is clicked?

Posted: Thu Jul 08, 2021 12:42 pm
by burt
There are a couple of examples of modal in the core code, off the top of my head there is;

1 in advanced_search
1 in create_account (and the same one in checkout_confirmation)

The advanced search one would be easiest to follow I think.