How to use modal popup with tabs

<!– Jquery –>

jQuery(document).ready(function(){
$(‘.tabs li a:not(:first)’).addClass(‘inactive’);
$(‘.book-tab .containers’).hide();
$(‘.book-tab .containers:first’).show();

$(‘.tabs’).each(function(){
$(this).find(‘li a’).eq(0).removeClass(‘inactive’);
$(this).parents(‘.mod-inner’).find(‘.containers’).eq(0).show();
})

$(‘.tabs li a’).click(function(){
var t = $(this).attr(‘id’);
if($(this).hasClass(‘inactive’)){ //this is the start of our condition
$(this).parents(‘.mod-inner’).find(‘.tabs li a’).addClass(‘inactive’);
$(this).removeClass(‘inactive’);
$(this).parents(‘.mod-inner’).find(‘.containers’).hide();
$(this).parents(‘.mod-inner’).find(‘#’+ t + ‘C’).fadeIn(‘slow’);
}
});
});

<!– HTML –>

</div>

<!– css –>
<style>
.tabs {

width: 100%;
height:30px;
border-bottom: solid 1px #CCC;
padding-right: 2px;
margin-top: 30px;

}
a {cursor:pointer;}

.tabs li {
float:left;
list-style:none;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
margin-right:5px;
border-top-left-radius:3px;
border-top-right-radius:3px;
outline:none;
}

.tabs li a {

font-family:Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #5685bc;;
padding-top: 5px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 8px;
display:block;
background: #FFF;
border-top-left-radius:3px;
border-top-right-radius:3px;
text-decoration:none;
outline:none;

}

.tabs li a.inactive{
padding-top:5px;
padding-bottom:8px;
padding-left: 8px;
padding-right: 8px;
color:#666666;
background: #EEE;
outline:none;
border-bottom: solid 1px #CCC;

}

.tabs li a:hover, .tabs li a.inactive:hover {

color: #5685bc;
outline:none;
}

.containers {

clear:both;
width:100%;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
text-align:left;
padding-top: 20px;

}

.containers h2 { margin-left: 15px; margin-right: 15px; margin-bottom: 10px; color: #5685bc; }

.containers p { margin-left: 15px; margin-right: 15px; margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.containers ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.containers li { padding-bottom: 5px; margin-left: 5px;}

</style>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.