Menampilkan sebuah modal dialog yang baik itu
diperlukan untuk kenyamanan pengguna software yang telah di buat. Biasanya saat anda
melakukan instalasi software kita selalu disuguhkan sebuah tampilan dengan
button proses next prev dalam broses instalasinya. Setiap anda klik tombol Next
maka tampilan menuju page selanjutnya.
Modal dialog seperti yang diceritakan tadi bisa juga
dilakukan juga dengan Bootstrap dengan beberapa pengaturan pada CSS dan Jquery. Yang
harus diingat perhatikan penamaan name dan id pada element element yang dibuat.
Langkah-langkah Membuat Modal Next Prev Bootstrap
Pertama, buka software editor seperti Notepad++, Sublime Text atau yang lainnya.
Kedua, copy dan pastekan script di bawah ini pada lembar baru pada software editor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Ketiga, Pastekan script di bawah ini di bawah <head>, script ini dibutuhkan untuk menjalankan method yang ada pada script tersebut. Namun untuk menjalankanya anda perlu terkoneksi internet karena script tertuju langsung ke situs-nya masing-masing.
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Setting</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab" id="Graphic">Graphic</a></li>
<li><a href="#tab2" data-toggle="tab" id="Time">Time</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div style="border:1px solid #ddd;border-radius:7px;padding:10px 30px 10px 30px;">
<div class="row">
<input class="form-check-input" type="radio" name="agungpanduan" id="radio1" value="">
<label class="form-check-label" for="radio1">
Setting 1
</label>
</div>
<div class="row">
<input class="form-check-input" type="radio" name="agungpanduan" id="radio2" value="">
<label class="form-check-label" for="radio2">
Setting 2
</label>
<div id="radio5" class="desc">
<input class="form-check-input" type="radio" name="optradio" value="">
<label class="form-check-label" for="PourRad">
Sub Setting 1
</label>
</div>
<div id="radio6" class="desc">
<input class="form-check-input" type="radio" name="optradio" value="">
<label class="form-check-label" for="PourRad">
Sub Setting 2
</label>
</div>
</div>
<div class="row">
<input class="form-check-input" type="radio" name="agungpanduan" id="radio3" value="">
<label class="form-check-label" for="radio3">
Setting 3
</label>
</div>
<div class="row">
<input class="form-check-input" type="radio" name="agungpanduan" id="radio4" value="">
<label class="form-check-label" for="radio4">
Setting 4
</label>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div style="border:1px solid #ddd;border-radius:7px;padding:10px 30px 10px 30px;">
<div class="row">
<input class="form-check-input" type="radio" name="agungpanduan" id="radio7" value="">
<label class="form-check-label" for="radio1">
Setting 5
</label>
</div>
<div class="row">
<input class="form-check-input" type="radio" name="agungpanduan" id="radio8" value="">
<label class="form-check-label" for="radio1">
Setting 6
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-primary" id="btn-Next">Next</button>
<button type="submit" class="btn btn-sm btn-primary" id="btn-Ok" onclick="btnOk_onClick();">Ok</button>
<button type="submit" class="btn btn-sm btn-success" id="btn-Previous">Previous</button>
<button type="button" class="btn btn-sm btn-danger" id="btnCancel" onclick="" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
Catatan: yang menjadi element utama yaitu dari DIV dengan penamaan
yang mengandung teks “tabs”. Div dengan class “tab-pane active” merupakan div
yang akan menampilkan tab pertama dari modal. Setiap tombol Next di tekan maka
akan berpindah ke “tab-pane lainnya”. “tab-pane active” harus memiliki di yang
berbeda.
Kelima, Masukan script css untuk mempercantik tampilan Modal Dialognya dan simpan di bawah <HTML> atau bisa di bawah <Head>.
<style type="text/css">
.desc{
margin-left: 20px;
font-size:20px;
}
.form-check-label
{
font-size:20px;
}
.btn-next,
.btn-next:focus {
background-color: #428bca !important;
border-color: #428bca;
}
.btn-next:hover,
.btn-next:active,
.open > .btn-next.dropdown-toggle {
background-color: #1b6aaa !important;
border-color: #428bca;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("div.desc").hide();
$('#btn-Previous').hide();
$('#btn-Ok').hide();
});;
$('input[type=radio][name=agungpanduan]').change(function () {
if (this.id == 'radio2') {
$("#radio5.desc").show();
$("#radio6.desc").show();
}
else {
$("#radio5.desc").hide();
$("#radio6.desc").hide();
}
});
$('#btn-Next').click(function () {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
$('#btn-Previous').show();
$('#btn-Ok').show();
$('#btn-Next').hide();
});
$('#btn-Previous').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
$('#btn-Previous').hide();
$('#btn-Ok').hide();
$('#btn-Next').show();
});
$('#Graphic').click(function () {
$('#btn-Previous').hide();
$('#btn-Ok').hide();
$('#btn-Next').show();
});
$('#Time').click(function () {
$('#btn-Previous').show();
$('#btn-Ok').show();
$('#btn-Next').hide();
});
</script>
Share This :
0 Comments