Tech Mais
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

techadd

Entrar

description[FORUMEIROS] Banir membro em janela modal (pop up) Empty[FORUMEIROS] Banir membro em janela modal (pop up)

more_horiz
Nome do Arquivo: Banir membro em janela modal (pop up)
Funcionalidade: Todas as versões
Resultado: https://i.imgur.com/BTPF41W.png
Autor: Premotheus
Dificuldade para aplicação e compreensão do código: Fácil - Simples



Trago a vocês um de meus tutoriais, breve posso está postando outros por aqui.

Bem... Vamos aos códigos!

Primeiro isto em nosso CSS:

Código:


/***********************
Name:
Banir membro em janela modal (pop up)
Creator:
Premotheus
Version:
1.0
Update: 9/9/2014
************************/
.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);
}


Agora vamos criar um novo JavaScript:

Título *: Qualquer;
Investimento *: Em todas as páginas;

Código:

Código:


//* Name: Banir membro em janela modal (pop up)
//* Creator: Premotheus (Target)
//* Visit: http://bestskins.forumeiros.com/
//* CopyRight© 2014 - Premotheus (Target)

$(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="Fechar janela" class="imgbanclose" />' +
                                     '</a>' +
                         '</div>' +
                                      '</div>' +
                   '<div class="conteudo">'  +
                   '<div class="header">' +
                   '<h1 class="page-title"> Banir usuário </h1>' +
                '</div>' +
                    '<div class="conteudo_banimento">' +
                      '<form action="/modcp?tid='+tid+'" method="post" class="frm-form">' +
                    '<p class="frm-info">Preencha abaixo e clique em confirmar para banir o membro</p>' +
                   '<p>' +
                '<label>Período que o membro ficará banido (em dias)</label>' +
                   '<input type="text" name="ban_user_date" class="inputbox tiny">' +
          '</p>' +
                      '<p>' +
                         '<label>Motivo do banimento:</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="Confirmar" title="Clique para banir o membro">' +
                          '<input type="submit" name="cancel" value="Cancelar" title="Clique para cancelar o banimento">' +
                            '</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');

});

description[FORUMEIROS] Banir membro em janela modal (pop up) EmptyRe: [FORUMEIROS] Banir membro em janela modal (pop up)

more_horiz
Olá Premotheus,

Obrigado por estar a contribuir com nós, fornecendo este tutorial.

[sucesso=Aceito]+ 10 Pontos adicionados ao seu perfil

[/sucesso]

description[FORUMEIROS] Banir membro em janela modal (pop up) EmptyRe: [FORUMEIROS] Banir membro em janela modal (pop up)

more_horiz
Ótimo tutorial, parabéns! Muito feliz (rindo)

description[FORUMEIROS] Banir membro em janela modal (pop up) EmptyRe: [FORUMEIROS] Banir membro em janela modal (pop up)

more_horiz
privacy_tip Permissões neste sub-fórum
Não podes responder a tópicos
power_settings_newInicie sessão para responder