Public Forums 71,145 posts

[betteryouthanme Friend betteryouthanmeJoin date: June 2014Posts: 53Downloads:5Uploads:16 Thanks: 12 Thanked: 5 times in 2 posts]

#200326

Hi,
just met another problem. 😉

I’d like to add a button next to the search in header. On click it should open a modal with the login module or any other module, doesnt matter so far..

I edited the header.php as followed:
(see attachment first picture)

And added to custom.css following lines:

.head-login {
height: 55px;
position: absolute;
right: 120px;
top: 0;
margin: 0;
}

Now created a custom html with following code:
<a href=”#” class=”btn btn-lg btn-success”
data-toggle=”modal”
data-target=”#basicModal”>Login / Register</a>

<div class=”modal fade” id=”basicModal” tabindex=”-1″ role=”dialog” aria-labelledby=”basicModal” aria-hidden=”true”>
<div class=”modal-dialog modal-sm”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”><i class=”glyphicon glyphicon-remove”></i></button>
<h4 class=”modal-title” id=”myModalLabel”>Login / Register</h4>
</div>
<div class=”modal-body”>
{loadposition login}
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-warning” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>

So far it works, the button is displayed infront of the search.

But if i click to open the modal, it is hidden behind the modal backdrop.. (see 2nd picture)

Hopefully you can help me out.
Best Regards

---

Attachments:

1. 
2. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#545050

can you please post your site Url. So I could check it directly.

[betteryouthanme Friend betteryouthanmeJoin date: June 2014Posts: 53Downloads:5Uploads:16 Thanks: 12 Thanked: 5 times in 2 posts]

#545059

<em>@Chavan 440141 wrote:</em><blockquote>can you please post your site Url. So I could check it directly.</blockquote>

The site is not online, testing with XAMPP and if everything works it goes live. 😉

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#545075

Please post in the development server. Since it seems to a css fix, so I need to check it . so asking for the site Url

[betteryouthanme Friend betteryouthanmeJoin date: June 2014Posts: 53Downloads:5Uploads:16 Thanks: 12 Thanked: 5 times in 2 posts]

#545110

<em>@Chavan 440170 wrote:</em><blockquote>Please post in the development server. Since it seems to a css fix, so I need to check it . so asking for the site Url</blockquote>
managed to set it up. Have a look here:
http://79.143.187.92/joomla/

Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#545123

create a new position just before end of the </body> then add this Modal code to that position


<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button> <h4 class="modal-title" id="myModalLabel">Login / Register</h4> </div> <div class="modal-body"> {loadposition login} </div> <div class="modal-footer"> <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Now there are 2 positions one is the Button at the top and the Modal pop up is in the bottom of the page.

this is exact way to accomplish this. give a try. If you couldn’t get this right, send me the admin details in PM. I will get this done for you.

1 user says Thank You to chavan for this useful post

1. betteryouthanme

[betteryouthanme Friend betteryouthanmeJoin date: June 2014Posts: 53Downloads:5Uploads:16 Thanks: 12 Thanked: 5 times in 2 posts]

#545139

Got it. Thanks for your help! Fantastic support 🙂

[Author]

Posts