Popup Ban

 :: Resurse Fg © Techno-Zone :: Tutoriale și resurse :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

Popup Ban Empty Popup Ban

#48
Deliric
Deliric
Admin
Mesaje : 145
Reputatie : 187
https://board.forumgratuit.ro

MesajDeliric Joi Feb 12, 2015 6:23 pm

1º - Javascript
Amplasare Toate paginile

Cod:
[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
Cod:
[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º - Previzualizare
Popup Ban M7OPMIp

Vezi subiectul anterior Vezi subiectul urmator Sus

Crează un cont pentru a creat un subiect.

Trebuie să fii membru pentru a lăsa un răspuns.

Crează un cont

Alăturați-vă comunității noastre prin crearea unui cont nou. Este ușor!


Creați un cont nou

Conectați-va

Ai deja un cont? Nici o problemă, conecteaza-te aici.


Conectați-va

 :: Resurse Fg © Techno-Zone :: Tutoriale și resurse :: Tutoriale

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum
Forumgratuit.ro | ©phpBB | Forum gratuit de suport | Semnaleaza un abuz | Discuții recente