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] Quick popup BAN module



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

1
Offline

  Guest

avatar
Guest


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



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

    });


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


- Preview





© PunBB Design


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

avatar
Newbie
Newbie
this work for invision?? i dont find the option to ban :ccccccccc in the fourm i mean with this feature

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

3
Offline

  nanako

avatar
Punbb Guru
Punbb Guru
I'll try this one.

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

4
Offline

  Michael_vx

avatar
Punbb Junior
Punbb Junior
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*

avatar
Punbb Senior
Punbb Senior
We need an option to ban a member... this doesn't work.

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

6
Offline

  Destroya*

avatar
Punbb Senior
Punbb Senior
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

avatar
Punbb Senior
Punbb Senior
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

avatar
★Moderator★
★Moderator★
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

avatar
V.I.P. Member
V.I.P. Member
nice

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

10
Offline

  ironico

avatar
Newbie
Newbie
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