Jump to content

Регистрация


Recommended Posts

2 часа назад, masi4ka сказал:

вот где написано регистрация нужно что бы появилось аякс окно с регистрацияй

_hashtag_icon-icons.com_65804.png

 

Вот вам примерчик

Кнопка

 <a class="button" data-type="window-container">Регистрация</a>

js код

<script type="text/javascript">
    $(document).ready(function() {    
        $('.button').click(function() {        
            type = $(this).attr('data-type');        
            $('.overlay-container').fadeIn(function() {            
                window.setTimeout(function(){
                    $('.window-container.'+type).addClass('window-container-visible');
                }, 100);    
            });
        });    
        $('.box-close').click(function() {
            $('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
        });    
    });
</script>


html код

<div class="overlay-container">
  <div class="window-container">
    <div class="box-close">Закрыть</div>
        <h3>Регистрация на сайте</h3>
    
    
        <--------Под себя изменить-------->
        <div align="center">
            <input type="" class="" id="" placeholder="Имя">        
            <input type="" class="" id=""  placeholder="Фамилия">
            <button onclick="" class="" >Зарегистрироваться</button>              
        </div>
        <---------------->
        
        
        
    </div>
</div>


css код

.overlay-container{ 
    display: none; 
    content: " "; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(127,127,127,0)), color-stop(100%, rgba(127,127,127,0.9)));  
    background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%); 
    background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%); 
    background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f', GradientType=1 );
}
.window-container{ 
    display: block; 
    background: #fcfcfc; 
    margin: 8em auto; 
    float:none; 
    width: 500px; 
    padding: 10px 20px 20px; 
    text-align: left; 
    z-index: 3; 
    border-radius: 3px; 
    box-shadow: 0px 0px 30px rgba(0,0,0,0.2); 
    -webkit-transition: 0.4s ease-out; 
    -moz-transition: 0.4s ease-out; 
    -ms-transition: 0.4s ease-out; 
    -o-transition: 0.4s ease-out; 
    transition: 0.4s ease-out; 
    opacity: 0; 
}
.window-container-visible { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
}
.window-container .box-close { 
    text-align: right;
}
.window-container h3 { 
    margin: 1em 0 0.5em; 
    font-family: "Oleo Script"; 
    font-weight: normal; 
    font-size: 25px; 
    text-align: center; 
}

И библиотека jquery.lib.js

Edited by magomedcoder
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...