ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Cara Buat Modal Next Prev Bootstrap

2/26/2020
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>
Keempat, Buatkan div container seperti di bawah ini di dalam <body>

<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">&times;</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>
Keenam, Memasukan script jquery untuk mengatur tampilan Modal Dialognya yang mana element yang harus di hide()-show() pada saat tombol Next dan Prev di tekan.

<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