How To Login from bootstrap modal?

[ollie2015]

bootstrap is loading its the top menu....

where is the mybb modal located?

[leefish]

It would help significantly if you actually shared the template as asked. Then I can see how you have that laid out.

Regarding the location of the modal.js it is in the general.js

PS - Why not be expat here as you are on myBB forums?

[ollie2015]

Code:

<script> var bsModal = $.fn.modal.noConflict(); </script>

---

how do i use that?

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<div class="dropdown"> <span id="User-dropdown" role="button" data-toggle="dropdown" data-target="#"> <img src="images/defaultavatar.png" alt="Guest" class="avatar" /> Hi, Guest </span> <ul class="dropdown-menu" role="menu" aria-labelledby="User-dropdown"> <li><a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true }); return false;" class="login">{$lang->welcome_login}</a></li> <li><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a> &mdash; <a href="{$mybb->settings['bburl']}/myfbconnect.php?action=login">{$lang->myfbconnect_login}</a></li> </ul> </div> <div class="modal" id="quick_login" style="display: none;"> <form method="post" action="{$mybb->settings['bburl']}/member.php"> <input name="action" type="hidden" value="do_login" /> <input name="url" type="hidden" value="" /> <input name="quick_login" type="hidden" value="1" /> <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder"> <tr> <td class="thead" colspan="2"><strong>{$lang->login}</strong></td> </tr> <tr> <td class="trow1" width="25%"><strong>{$login_username}</strong></td> <td class="trow1"><input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" /></td> </tr> <tr> <td class="trow2"><strong>{$lang->password}</strong></td> <td class="trow2"> <input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" /> <a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password">{$lang->lost_password}</a> </td> </tr> <tr> <td class="trow1">&nbsp;</td> <td class="trow1 remember_me"> <input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" /> <label for="quick_login_remember">{$lang->remember_me}</label> </td> </tr> <tr> <td class="trow2" colspan="2"> <div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" /></div> </td> </tr> </table> </form> </div> <script type="text/javascript"> $("#quick_login input[name='url']").val($(location).attr('href')); </script>

---

[leefish]

I think I remember why I have you on my "list" at MyBB Community....

Please answer the question:

1) Why are you wanting to use the bootstrap modal when there is a modal included with the MyBB core?

Try this code in your template:

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<div class="dropdown"> <span id="User-dropdown" role="button" data-toggle="dropdown" data-target="#"> <img src="images/defaultavatar.png" alt="Guest" class="avatar" /> Hi, Guest </span> <ul class="dropdown-menu" role="menu" aria-labelledby="User-dropdown"> <li><a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true }); return false;" class="login">{$lang->welcome_login}</a></li> <li><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a> &mdash; <a href="{$mybb->settings['bburl']}/myfbconnect.php?action=login">{$lang->myfbconnect_login}</a></li> </ul> </div> <div class="modal" id="quick_login" style="display: none;"> <form method="post" action="{$mybb->settings['bburl']}/member.php"> <input name="action" type="hidden" value="do_login" /> <input name="url" type="hidden" value="" /> <input name="quick_login" type="hidden" value="1" /> <div class="modal-dialog"> <div class="modal-content"> <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder"> <tr> <td class="thead" colspan="2"><strong>{$lang->login}</strong></td> </tr> <tr> <td class="trow1" width="25%"><strong>{$login_username}</strong></td> <td class="trow1"><input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" /></td> </tr> <tr> <td class="trow2"><strong>{$lang->password}</strong></td> <td class="trow2"> <input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" /> <a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password">{$lang->lost_password}</a> </td> </tr> <tr> <td class="trow1">&nbsp;</td> <td class="trow1 remember_me"> <input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" /> <label for="quick_login_remember">{$lang->remember_me}</label> </td> </tr> <tr> <td class="trow2" colspan="2"> <div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" /></div> </td> </tr> </table> </form> </div> </div></div> <script type="text/javascript"> $("#quick_login input[name='url']").val($(location).attr('href')); </script>

---

[ollie2015]

did you see the image i put up? there is nowhere there that mybb modal is seen.

You really need to listen to what people are saying, rather than what you want them to say LOL

And i have tried your "solution" already....

is the same theme on both hosts, one uses mybb modal and the other decides to use bootstrap's

[leefish]

You wont give a link to the theme on the web so I cant look at it. I cant look on your localhost. You still havent answered the question of why you want to use the bootstrap modal. You haven't said if you have tried a custom build. You havent confirmed if bootstrap is loading on your localhost.

Not really anything to listen to

I actually do want to try and help you, but it is difficult.

Looking at that screenshot - it might be the MyBB modal - its quite hard to tell the two apart from a screenshot - the live site would be better.

[ollie2015]

OK custom bootstrap allow the modal to pop up BUT there are some other weird things happening, like the close button doesnt show on both hosts. Pretty sure i replaced css on both hosts

[leefish]

Ok, so now the modal works, yay for that.

Just so I understand - can you show a picture of the modal on localhost and on the live web?

Why it wasnt working:

The MyBB modal uses the word modal in its classes - so does bootstrap. As both of the js's are using the same class selectors things get confused. This is why I asked if you wanted to use the bootstrap modal; ie was it a conscious decision or was it that you wanted a responsive theme, chose bootstrap and then the modal broke?

Depending on the answer its a different solution. To use the MyBB modal with bootstrap you have to use a custom build of the js (as you have now). To replace the MyBB modal with the bootstrap you have to edit a fair few templates.

[ollie2015]

really did NOT want to spend time on a stupid modal LOL.....but it s a login so it cannot be used on live site....

BUT since one of the two needed to go so the conscious choice was to take the most pleasing one on the eye

Thanks for your time. My guess is the theme i am basing on, wasnt tested well enough and it depends on other plugins which of the two modal is activated first

[leefish]

Yea, its hard if you are building a theme based on someone else's work. I know that when I first started making themes I just made my own header, and changed a few colors for the thead. Happy days.

is this case closed then or do you need more help?