Tech Mais

O Tech Mais é um fórum que aborda vários temas atuais, de cultura e arte até programação e tecnologia.


Você não está conectado. Conecte-se ou registre-se

 » Programação » Tutoriais de Códigos » Tutoriais para Forumeiros » 

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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar
Novato

em Seg Set 15, 2014 3:06 pm
Nome do Arquivo: Banir membro em janela modal (pop up)
Funcionalidade: Todas as versões
Resultado: http://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');

});

Ver perfil do usuário
avatar
Administrador

em Seg Set 15, 2014 3:10 pm
Olá Premotheus,

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

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

[/sucesso]

Ver perfil do usuário http://techmais.forumeiros.com
avatar
Novato

em Sab Set 20, 2014 4:51 pm
Ótimo tutorial, parabéns! Muito feliz (rindo)

Ver perfil do usuário
Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum