Bootstrap Snippet panel primary modal using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-md-6">
    <div class="panel with-nav-tabs panel-primary">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1primary" data-toggle="tab">Cicilan 3 Bulan</a></li>
                <li><a href="#tab2primary" data-toggle="tab">Cicilan 6 Bulan</a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="tab1primary">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td class="heading-table">Nama Lengkap</td>
                                <td>:</td>
                                <td class="table-name"></td>
                            </tr>
                            <tr>
                                <td class="heading-table">Nomor Pinjaman</td>
                                <td>:</td>
                                <td class="nomor-pinjaman"></td>
                            </tr>
                            <tr>
                                <td class="heading-table">Pokok Hutang</td>
                                <td class="">:</td>
                                <td class="pokok-hutang">Rp.</td>
                            </tr>
                            <tr>
                                <td class="heading-table">Jangka Waktu Pembiayaan</td>
                                <td class="">:</td>
                                <td>3 Bulan</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.panel.with-nav-tabs .panel-heading{
    padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
    border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
    margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
    color: #fff;
    background-color: #3071a9;
    border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
    color: #428bca;
    background-color: #fff;
    border-color: #428bca;
    border-bottom-color: transparent;
}
.heading-table {
    width: 250px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $('.table-name').html("Elkin");
    $('.nomor-pinjaman').html('2313132');
    $('.pokok-hutang').html('Rp. 2000000');
    
    $('.btn').click(function(){
    if( $('#checkbox-agree').is(":checked")) {
        alert('sukses');
    } else {
        alert('gagal');
    }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"panel primary modal"
Bootstrap 3.0.0 Snippet by elkhunsu

Related: See More

Questions / Comments:

"panel primary modal" Bootstrap 3.0.0 Snippet by elkhunsu

Related: See More

Questions / Comments:

"panel primary modal"
Bootstrap 3.0.0 Snippet by elkhunsu