Place Module in Modal in header as a button
- Posted by Holly Hine (3) Offline
Hello,
We currently have a module in modal on the home page of our website set to load on page load, in the center of the page.
We want to change this, to be a button in the header of our website, so when someone clicks the button, this same content and box will appear.
I having trouble figuring out what html to put in the header index.php file of our website to get this to happen. Can you please help?
6 years 10 months ago #1
by Holly Hine
We currently have a module in modal on the home page of our website set to load on page load, in the center of the page.
We want to change this, to be a button in the header of our website, so when someone clicks the button, this same content and box will appear.
I having trouble figuring out what html to put in the header index.php file of our website to get this to happen. Can you please help?
Please Log in or Create an account to join the conversation.
- Posted by TemplatePlazza (5263) Offline
Hi, Are you looking for something like this website have on the top section?
6 years 10 months ago #2
by TemplatePlazza
We're also available for Custom Joomla Development. Hire us now
Please Log in or Create an account to join the conversation.
- Posted by TemplatePlazza (5263) Offline
If the answer is yes then you could add a code like this in the top of your template's index.php file :
<div class="top-banner-quote"><div class="row"><div class="small-12 columns"> <p> Place your text in here < a href="mim-open-button" class="button tiny">Open Modal</a></p></div></div></div>
and adding this code to your css file :
.top-banner-quote {
height: 72px;
background: url(../images/bg-quote-banner.jpg) #1CA8E5;
padding: 0;
color: #fff;
text-align: center;
margin: 0;
}
6 years 10 months ago #3
by TemplatePlazza
<div class="top-banner-quote"><div class="row"><div class="small-12 columns"> <p> Place your text in here < a href="mim-open-button" class="button tiny">Open Modal</a></p></div></div></div>
and adding this code to your css file :
.top-banner-quote {
height: 72px;
background: url(../images/bg-quote-banner.jpg) #1CA8E5;
padding: 0;
color: #fff;
text-align: center;
margin: 0;
}
Please Log in or Create an account to join the conversation.