MyBB Community Forums

Hello friends


Here, I would guide you further modal effect for MyBB 1.8

Demo:


1. Upload file: modal.min.css and modal.min.js in your theme folder

2. Ungrouped Templates --> headerinclude

Find: {$stylesheets}

Insert before:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/images/folder-theme/modal.min.js"></script>
<link rel="stylesheet" href="{$mybb->asset_url}/images/folder-theme/modal.min.css" type="text/css">
<script type="text/javascript">
    $(function () {
        $('.modal_popups').on('click', function ( e ) {
            Custombox.open({
                target: this.getAttribute('href'), // Id names in Modal:( target: '#modal')
                effect: this.getAttribute('data-effect'),        //    Effects name: ( effect: 'contentscale' , 'fadein', 'slide' ,'newspaper' , 'fall' , 'sidefall' , 'sign' , 'superscaled', 'slit' , 'blur' , 'flip' , 'rotate' , 'letmein' , 'makeway' , 'slip' , 'corner' , 'slidetogether' , 'scale' , 'door' , 'push' ) 
                //cache: false,
                //escKey: true,
                //zIndex: auto,
                //overlay: true,
                //overlayColor: #000,
                //overlayOpacity: 0.8,
                //overlayClose: true,
                //overlaySpeed: 300,
                //overlayEffect: auto,  ( 'makeway' )
                //width: null,
                //position: 'center, center',
                //animation: null,  ( 'top, bottom' )
                //speed: 600                
            });
            e.preventDefault();
        });
    });
</script>

3. Finally, insert it in anywhere you want

<a href="#modal" class="modal_popups" data-effect="contentscale">Modal</a>
<div id="modal">
body popup
</div>

+ data-effect="contentscale" : you can rename effects here

Here, I applied with guest login

header_welcomeblock_guest:

						<!-- Continuation of div(class="upper") as opened in the header template -->
						<span class="welcome">{$lang->welcome_guest} <a href="#modal" class="login modal_popups" data-effect="contentscale">{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></span>
					</div>
				</div>
				<div class="modal" id="modal">
					<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>

End !

how do i get bootstraps to work tho?

it seems like there is a conflict with the css of mybb and bootstraps.

Unless the theme was built on bootstrap, I wouldn't recommend importing it just for modal effects.