Home
2015-09-24, 10:37
![[Javascript] Ajax Ban Module Alerte10](https://i.servimg.com/u/f66/15/86/37/09/alerte10.png) | Tutorial: Ajax Ban Module |
By using this tutorial you will have a popup modal for quick banning without page change.
Credits goes to @Fraise
--> Tutorials, tips and tricks <--
Ajax Ban Module
Ajax Ban Module
1º - Javascript
Placement: In all pages
- Code:
[panda=js]$(function(){var id=location.pathname.match(/\d+/g),tid=$('input[name="tid"]').val(),modal_html='<div class="ban-modal" id="ban_pop" style="display:none">'+'<div class="ban_content">'+'<div class="close">'+'<img src="http://i83.servimg.com/u/f83/17/06/15/51/close10.png" />'+'</div>'+'<div class="head_title">'+'<div class="header">'+'<h1 class="page-title"> Quick Ban</h1>'+'</div>'+'<div class="ban_comm">'+'<form action="/modcp?tid='+tid+'" method="post" class="frm-form">'+'<p class="frm-info">Are you sure you want to ban this member?</p>'+'<p>'+'<label>(Optional) for a period: </label>'+'<input type="text" name="ban_user_date" class="inputbox tiny">'+'</p>'+'<p>'+'<label>(Optional) for the following reason:</label>'+'<input type="text" name="ban_user_reason" class="inputbox tiny">'+'</p>'+'<fieldset class="frm-set">'+'<dl>'+'<dt></dt>'+'<dd>'+'<input type="hidden" name="tid" value="'+tid+'">'+'<input type="hidden" name="mode" value="ban">'+'<input type="hidden" name="user_id" value="'+id+'">'+'<input type="submit" name="confirm" value="Submit">'+'<input type="submit" name="cancel" value="Cancel">'+'</dd>'+'</dl>'+'</fieldset>'+'</form>'+'</div>'+'</div>'+'</div>'+'</div>'+'<div class="back_body" style="display:none"></div>';$('.main .main-content strong a[href*="/modcp?mode=ban"]').addClass('ban_user');$('body').prepend(modal_html);$('.main-content strong > .ban_user').click(function(){$('#ban_pop, .back_body').fadeIn('1500')});$('.close, .back_body').click(function(){$('#ban_pop, .back_body').fadeOut('2000')});$('a[href*="/modcp?mode=ban"]').attr('href','#fast_ban')});
2º - CSS
- Code:
[panda=css].close {
float: right;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.back_body {
background: none repeat scroll 0 0 rgba(31, 31, 31, 0.6);
height: 100%;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
.head_title > .header > .page-title {
font-size: 16px;
padding: 3px;
background: url("http://i83.servimg.com/u/f83/17/06/15/51/mainti10.png") repeat-x scroll center top #2C5687;
font-weight: 300;
}
.ban_comm {
background: #fff;
font-size: 12px;
padding: 7px;
color: #333;
height: 160px;
}
.ban-modal .ban_content > .head_title > .header {
background: none repeat scroll 0 0 rgba(40, 40, 40, 0.33);
}
.ban_comm .frm-form .frm-info {
margin-bottom: 15px;
color: #333;
text-align: left;
}
.ban_comm > .frm-form > p > input.inputbox.tiny {
border: 1px solid #ddd;
color: #333;
margin-bottom: 6px;
margin-left: 2px;
padding: 3px;
}
.ban_comm > .frm-form > p > input.inputbox.tiny:focus {
outline: 0 none;
}
.ban_comm > .frm-form > fieldset.frm-set > dl {
margin-left: -20%;
}
.ban_comm > form.frm-form > fieldset.frm-set > dl > dd > input[type="submit"] {
border-radius: 3px;
cursor: pointer;
float: left;
margin-left: 5px;
padding: 4px;
}
.ban_comm > form.frm-form > fieldset.frm-set > dl > dd > input[name="confirm"] {
background: #333333;
border: 1px solid #ccc;
color: #fff;
}
.ban_comm > form.frm-form > fieldset.frm-set > dl > dd > input[name="confirm"]:hover {
background-color: #cacaca;
}
.ban_comm > form.frm-form > fieldset.frm-set > dl > dd > input[type="submit"]:hover {
background-color: #555;
}
.ban_comm > form.frm-form > fieldset.frm-set > dl > dd > input[name="cancel"] {
background: #222;
border: 1px solid #000;
color: #fff;
text-shadow: 0px 0px 2px #fff;
}
.ban_content {
padding: 5px;
}
div#ban_pop {
background-color: rgba(70,70,70,0.6);
border-radius: 3px;
bottom: 10px;
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
color: #fff;
padding: 0;
position: fixed;
right: 39%;
z-index: 999;
bottom: 35%;
}
3º - Preview
![[Javascript] Ajax Ban Module Qab2tj3](https://i.imgur.com/Qab2tj3.png)
© PunBB Design
![[Javascript] Ajax Ban Module Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | If you have any questions related to this topic create a topic with the following title: Ajax Ban Module |
![[Javascript] Ajax Ban Module Left1011](https://i.servimg.com/u/f57/17/68/86/50/left1011.png){kind=small}
![[Javascript] Ajax Ban Module Middle10](https://i.servimg.com/u/f72/17/48/02/71/middle10.png){kind=small}
![[Javascript] Ajax Ban Module Right10](https://i.servimg.com/u/f72/17/48/02/71/right10.png){kind=small}
