• Descrição:

Olá senhores!

Eu gostaria de saber si é possível adicionar essa pop-up, sem ser por widget, como o fórum já tem a função de pop-up, não quero gasta um slot dos widget.

quero que a pop-up fique assim


o código que uso nela e esse, porém como widget.

Código:

<div id="show">
     
    <div id="fade">
         
    </div>
     
    <div class="popup_block">
         
        <div class="popup">
             <a href="#" id="popupclose"><img src="http://i38.servimg.com/u/f38/17/31/71/58/icon_c10.png" class="cntrl" title="Fechar" /></a>
            <h3>
                 Bem Vindo ao Fórum <strong>Vida de Aquarista</strong>
            </h3>
             
            <p>
                 <span style="color: rgb(0, 0, 0);">Para poder utilizar todos os atributos deste fórum, será necessário que você se registre-se em nosso fórum.<br /><br />O cadastro é <strong>gratuito </strong>e leva pouco tempo para ser preenchido.<br />Durante o cadastro, será requerida uma conta de e-mail válida, um login e uma senha. Todos os campos deveram ser preenchidos, para ter a tua conta!</span><br />
            </p><br /><br />
            <center>
                 <a href="/register" title="Cadastre-se" style="text-decoration: none;color: black;font-weight: bold;font-family: cursive;font-size: 25px;">Registre-se Agora!</a>
            </center>
             
            <p>
                 
            </p><br />
            <form action="/login" method="post" name="form_login" id="login">
                 
                <p style="text-align: left;text-decoration: none;position: relative;top: -10%;margin-left: 4%;">
                     <a style="text-decoration: none" href="/login">Já sou cadrastrado!</a>
                </p>
                 
                <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
                     
                    <tbody>
                         
                        <tr>
                             
                            <td style="width: 100%;" align="right">
                                 
                                <div align="center">
                                     <strong>Usuário:</strong> <input id="ips_username" class="input_text" name="username" size="15" tabindex="1" type="text" /> <strong>Senha:</strong> <input id="ips_password" class="input_text" name="password" size="15" tabindex="2" type="password" /> <input name="login" class="input_submit" value="Logar" type="submit" />
                                </div>
                                 
                            </td>
                             
                        </tr>
                         
                        <tr>
                             
                            <td>
                                 
                            </td>
                             
                        </tr>
                         
                        <tr>
                             
                        </tr>
                         
                    </tbody>
                     
                </table>
                 
            </form>
             
        </div>
         
    </div>
     
</div>
 <script type="text/javascript">
    jQuery('#popupclose').click(function(){
    jQuery('#show').fadeOut('fast');return false;
    });
    if (location.pathname == '/login') {
    jQuery('#show').css('display','none');
    }
    if (location.pathname == '/register') {
    jQuery('#show').css('display','none');
    }
    </script> <style type="text/css">
    #fade {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    filter:alpha(opacity=80);
    opacity: .30;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    /*--IE 8 Transparency--*/
    left: 0;
    top: 0;
    z-index: 10;
    }
    #show {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }
    .popup_block {
    background-color: #33CCFF;
   background-position: 60% 30%;
    padding: 10px 20px;
    border: 10px solid #fff;
    float: left;
    width: 480px;
    position: fixed;
    top: 20%;
    left: 50%;
    margin: 0 0 0 -250px;
    z-index: 100;
    }
    .popup_block .popup {
    float: left;
    width: 100%;
    background: #fff;
    margin: 10px 0;
    padding: 10px 0;
    border: 1px solid #bbb;
    }
    .popup h3 {
    margin: 0 0 20px;
    padding: 6px 11px;
    border-bottom: 1px solid #bbb;
    font-size: 1.5em;
    font-weight: normal;
    }
    .popup p {
    padding: 5px 10px;
    margin: 5px 0;
    }
   .popup {
      background: #FFFFFF url(http://s5.postimg.org/szrnw3jdz/20pct.png) no-repeat !important;
   }
    .popup img.cntrl {
    position: absolute;
    right: -20px;
    top: -20px;
    }
    .input_text {
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #848484 #C1C1C1 #E1E1E1 #C1C1C1;
    background: white;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    }
    .input_submit {
    -moz-border-radius: 3px;
    -moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
    background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png) repeat-x top;
    border-color: #212121;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
    color: white;
    cursor: pointer;
    padding: 4px 10px;
    text-decoration: none;
    }
    </style>

tem como deixa o pop-up assim sem necessidade de usar um widget?

• Informações:

Código:

    input#login_popup_close {
    padding: 8px 8px!important;
    background: #00CC99;
    color: #FFFFFF;
    border: 1px solid #474747!important;
    border-radius: 3px;
    font-size: 11px;
    box-shadow: 1px 1px 5px #333131;
    }

    div#login_popup_buttons input.button1 {
    padding: 8px 8px!important;
    background: #00CC99;
    color: #FFFFFF;
    border: 1px solid #474747!important;
    border-radius: 3px;
    font-size: 11px;
    box-shadow: 1px 1px 5px #333131;
    }
    div#login_popup_buttons input.button1:hover {
    color: #008563!important;
    }
    #login_popup {
    font-size: 11px!important;
    background-color: #2D2D2D;
    border: 2px solid #049987;
    color: #FFF;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 1px 1px 5px #000;
    padding: 6px;
    position: absolute;
    z-index: 999;
    }
    #login_popup .h3 {
    color: #DBDBDB!important;
    padding: 15px 15px 20px!important;
    margin: 5px 0px 16px!important;
    border: none!important;
    box-shadow: 1px 1px 3px #141414;
    font-style: italic;
    }



Código:

#login_popup {
background: white url(http://s5.postimg.org/szrnw3jdz/20pct.png)!important;
color: black!important;
}

Código:

input#login_popup_close {
display: none!important;
}

Código:

#login_popup .h3 {
color: black!important;
}