Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Ajax Ban Module



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Rapid

avatar
Punbb Rookie
Punbb Rookie


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



- 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')});


- 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%;
}


- Preview





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Ajax Ban Module

Powered by PunBB
Currently 0 users have thanked Rapid for this post:

2
Offline

  DooGy00

avatar
Punbb Rookie
Punbb Rookie
thnaks, but this code is modal, no ajax Smile

Powered by PunBB
Currently 0 users have thanked DooGy00 for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum