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

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[Javascript] Quick popup BAN module

Foto

[Javascript] Quick popup BAN module

by ,


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

1
Offline

  Guest

Anonymous
Guest
2014-09-13, 10:34

[Javascript] Quick popup BAN module Alerte10
Tutorial: Quick popup BAN module

This tutorial will show you how to quickly ban a certain user without page refresh.

Credit goes to @Prometheus


--> Tutorials, tips and tricks <--
Quick popup 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="banpop" style="display:none">' +
                            '<div class="ban_content">' +
                      '<div class="close_ban">' +
                        '<div class="cont_cls">' +
                            '<a href="#cls" class="fecha">' +
                            '<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-24.png" title="Close" class="imgbanclose" />' +
                                        '</a>' +
                            '</div>' +
                                          '</div>' +
                      '<div class="conteudo">'  +
                      '<div class="header">' +
                      '<h1 class="page-title"> Issue a Ban </h1>' +
                    '</div>' +
                        '<div class="conteudo_banimento">' +
                          '<form action="/modcp?tid='+tid+'" method="post" class="frm-form">' +
                        '<p class="frm-info">Fill the fields to proceed with a ban</p>' +
                      '<p>' +
                    '<label>Lenght of the ban(in days):</label>' +
                      '<input type="text" name="ban_user_date" class="inputbox tiny">' +
              '</p>' +
                          '<p>' +
                            '<label>Reason shown to the user:</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="Confirm" title="">' +
                              '<input type="submit" name="cancel" value="Cancel" title="">' +
                                '</dd>' +
                    '</dl>' +
                            '</fieldset>' +
                                  '</form>'+
                        '</div>' +
                        '</div>' +
                        '</div>' +
                    '</div>'+
          '<div class="fade_fora" 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 (){
    $('#banpop, .fade_fora').fadeIn('1100');
    });

    $('.close_ban > .cont_cls  > .fecha, .fade_fora').click(function (){
    $('#banpop, .fade_fora').fadeOut('1400');
    });

    $('a[href*="/modcp?mode=ban"]').attr('href', '#ban_creatortarget');

    });


2º - CSS
Code:
[panda=css]    .ban_content {
        padding: 11px;
    }

    div#banpop {
        position: fixed;
        background: rgba(13, 12, 12, 0.78);
        color: #fff;
        top: 20%;
        border-radius: 5px;
        z-index: 999;
        left: 33%;
        padding: 8px;
    }

    .close_ban {
        position: absolute;
        right: -3%;
        top: -5%;
        float: right;
    }

    .cont_cls {
        background: #fff;
        border-radius: 100%;
        border: 1px solid #f1f1f1;
    }

    .fade_fora {
        z-index: 9;
        height: 100%;
        width: 100%;
        background: rgba(31, 31, 31, 0.6);
        padding: 5px;
        position: fixed;
        top: 0;
    }


    .conteudo > .header > .page-title {
        font-size: 22px;
        padding: 3px;
        margin-bottom: 8px;
    }

    .conteudo_banimento {
        padding: 5px;
        background: rgba(48, 48, 48, 0.2);
        font-size: 14px;
        border-radius: 5px;
    }

    .ban-modal .ban_content > .conteudo > .header {
        background: rgba(40, 40, 40, 0.33);
    }

    .conteudo_banimento .frm-form .frm-info {
        padding: 14px;
        background: rgba(17, 17, 17, 0.36);
        margin-top: -5px;
        border-radius: 3px;
        margin-bottom: 20px;
        border: 1px solid #000;
    }

    .conteudo_banimento > .frm-form > p > input.inputbox.tiny {
        padding: 3px;
        margin-bottom: 6px;
        background: /* rgba(0, 0, 0, 0.24)*/ rgba(12, 12, 12, 0.59);
        color: #fff;
        border: 1px solid #111;
        margin-left: 6px;
    }

    .conteudo_banimento > .frm-form > p > input.inputbox.tiny:focus {
        outline: 0;
    }

    .conteudo_banimento > .frm-form > fieldset.frm-set > dl {
        padding: 5px;
        float: left;
        margin-left: -66%;
    }

    .conteudo_banimento > form.frm-form > fieldset.frm-set > dl > dd > input[type="submit"] {
        float: left;
        padding: 4px;
        margin-left: 5px;
        cursor: pointer;
        border-radius: 4px;
    }

    .conteudo_banimento > form.frm-form > fieldset.frm-set > dl > dd > input[name="confirm"] {
        background: rgb(58, 149, 237) url(://i74.servimg.com/u/f74/18/08/53/97/highli10.png) repeat-x 0 1px;
        color: #fff;
        border: 1px solid rgb(59, 137, 242)
    }

    .conteudo_banimento > form.frm-form > fieldset.frm-set > dl > dd > input[name="confirm"]:hover {
        background-color: rgb(39, 120, 200);
        border: 1px solid rgb(44, 120, 223);
    }

    .conteudo_banimento > form.frm-form > fieldset.frm-set > dl > dd > input[type="submit"]:hover {
        transition-duration: 1s;
        -moz-transition-duration: 1s;
        -webkit-transition-duration: 1s;
        -o-transition-duration: 1s;
        -f-transition-duration: 1s;
    }

    .conteudo_banimento > form.frm-form > fieldset.frm-set > dl > dd > input[name="cancel"] {
        background: rgba(0, 220, 3, 1) url(://i74.servimg.com/u/f74/18/08/53/97/highli10.png) repeat-x 0 1px;
        color: #fff;
        border: 1px solid rgb(9, 188, 9);
    }

    .conteudo_banimento > form.frm-form > fieldset.frm-set > dl > dd > input[name="cancel"]:hover {
        background-color: rgba(4, 184, 7, 1);
        border: 1px solid rgb(14, 200, 14);
    }


3º - Preview
[Javascript] Quick popup BAN module M7OPMIp



© PunBB Design


[Javascript] Quick popup BAN module Act_bottom If you have any questions related to this topic create a topic with the following title:
Quick popup BAN module

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

2
Offline

  cinder75

cinder75
Newbie
Newbie
2014-09-23, 01:21
this work for invision?? i dont find the option to ban :ccccccccc in the fourm i mean with this feature

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

3
Offline

  nanako

nanako
Punbb Guru
Punbb Guru
2014-09-24, 19:53
I'll try this one.

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

4
Offline

  Michael_vx

Michael_vx
Punbb Junior
Punbb Junior
2014-10-21, 13:37
i think something missing with me
i dont know how its working
and is the add new button
or the ban text ?
and is it working on PHPbb2

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

5
Offline

  Destroya*

Destroya*
Punbb Senior
Punbb Senior
2014-10-28, 14:21
We need an option to ban a member... this doesn't work.

Powered by PunBB
Thanks
Currently 0 users have thanked Destroya* for this post:

6
Offline

  Destroya*

Destroya*
Punbb Senior
Punbb Senior
2014-10-28, 14:23
It also doesn't let me ban a member when I go to their profile now. This indeed does not work.

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

7
Offline

  Tommy Lee

Tommy Lee
Punbb Senior
Punbb Senior
2014-11-05, 08:03
Hello All,

Do you still experince this issue of so I'll report it and get it sorted out!

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

8
Offline

  Virus

Virus
★Moderator★
★Moderator★
2014-11-05, 11:13
The tutorial has been tested and it is working fine! If you have any problems with this please open a new topic to Questions & Problems so you can get it fixed.

Thank you for your time,
~ Virus ~

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

9
Offline

  eLektronic2017x

eLektronic2017x
V.I.P. Member
V.I.P. Member
2014-11-14, 20:18
nice

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

10
Offline

  ironico

ironico
Newbie
Newbie
2014-12-27, 22:59
Hey very thanks!

Like very this

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

11
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content 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

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.