Hello friends
Here, I would guide you further modal effect for MyBB 1.8
Demo:
![[Image: A6ba3c8.png]]()
1. Upload file: modal.min.css and modal.min.js in your theme folder
2. Ungrouped Templates --> headerinclude
Find: {$stylesheets}
Insert before:
3. Finally, insert it in anywhere you want
+ data-effect="contentscale" : you can rename effects here
Here, I applied with guest login
header_welcomeblock_guest:
End !![Smile]( "Smile")
![.zip]( "Zip File")
modal.zip (Size: 5.8 KB / Downloads: 2)
Here, I would guide you further modal effect for MyBB 1.8
Demo:
![[Image: A6ba3c8.png]](http://i.imgur.com/A6ba3c8.png)
1. Upload file: modal.min.css and modal.min.js in your theme folder
2. Ungrouped Templates --> headerinclude
Find: {$stylesheets}
Insert before:
Code:
<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
Code:
<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:
Code:
<!-- 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"> </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 !
modal.zip (Size: 5.8 KB / Downloads: 2)