Learn free online HTML5, javascript, and jquery Tutorials by Examples

Monday 22 December 2014

Tab based popop in jQuery

<div class="tabbing">
        <ul class="tab">
            <li><a href="javascript:void(0);">Tab 1</a></li>
            <li><a href="javascript:void(0);">Tab 2</a></li>
            <li><a href="javascript:void(0);">Tab 3</a></li>
        </ul>
            <div class="login-popup" id="login-box">
                <a href="#" class="close">
                    <img src="close.png" width="32" height="32" style="float:right" class="btn_close" title="Close Window" alt="Close" />
                </a>
                hi
            </div>
            <div class="login-popup" id="login-box">
                <a href="#" class="close">
                    <img src="close.png" width="32" height="32" style="float:right" class="btn_close" title="Close Window" alt="Close" />
                </a>
                satish
            </div>
            <div class="login-popup" id="login-box">
                 <a href="#" class="close">
                     <img src="close.png" width="32" height="32" style="float:right" class="btn_close" title="Close Window" alt="Close" />
                 </a>
                mallick
            </div>
</div>

    <script src="js/jquery.js"></script>
<script>
     $(window).load(function(){
    $('.tabbing').children('.login-popup').hide();
});
    $(document).ready(function(){
        $('ul.tab').children('li').children('a').click(function(){
            $('body').append('<div id="mask"></div>');
            $('#mask').fadeIn(300);
            $('.tabbing').children('.login-popup').eq($(this).parent('li').index()).fadeIn(200);
        });
        $('a.close, #mask').click( function() {
          $('#mask , .login-popup').fadeOut(300, function() {
        $('#mask').remove();
    });
    return false;
    });
    });
</script>

<style>
   .tabbing { margin: 0 auto; width: 500px; }
.tabbing .login-popup { margin: 0 0 0 5px; padding: 14px; width: auto; padding:10px background: #d5d5d5; color: #000; clear: both; display: block; }
#mask { display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity: 0.8; z-index: 999; }
.login-popup { display: none; background: #333; padding: 10px; border: 2px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 40%; left: 50%; z-index: 99999; }


</style>

No comments:

Post a Comment