cara memunculkan popup ketika tombol details di klick via bootstrap

[url=https://ibb.co/mwThV5][/url]

cara nampilin popup saat tombol details di klik ini yang salah dmna yaa..?bagi yg mengerti bootstrap mohon bantuannya

ini codenya:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>BlackFashion</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/personal.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Courgette|Raleway" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
          <a href="index.php" class="navbar-brand">BlackFashion</a>
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Men<span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Shirts</a></li>
                     <li><a href="#">Pants</a></li>
                     <li><a href="#">Shoes</a></li>
                     <li><a href="#">Accessories</a></li>
                  </ul>
              </li>
          </ul>
       </div>
    </nav>

    <!--Header-->
    <div id="headerWrapper">
      <img src="foto/headerlogo/sendok.png" alt="" id="logo">
      <h1 id="header-text">BlackFashion</h1>
      <a href="#"id="button2">Let's Shoping</a>
    </div>

   <!--Main Content-->
   <div class="container-fuild">
     <!--Side left-->
     <div class="col-md-2"></div>
     <!--Main Content-->
     <div class="col-md-8">
       <div class="row">
        <h2 id="feature">Feature Products</h2>

        <div class="col-md-3">
          <h4>Boys hodie</h4>
          <img src="foto/products/boys1.png" alt="" class="img-tumb">
          <p class="list-price text-danger">List Price:<s>150.000-Rp,</s></p>
          <p class="price">Our Price:75.000-Rp,</p>
          <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#details-1">Details</button>
        </div>

      </div>
     </div>
     <!--Side Right-->
     <div class="col-md-2"></div>
   </div>

    <footer class="text-center" id="footer">©FadhilSanad Design 2017</footer>

   <!--Details Modal-->
   <div class="modal fade details-1" id="details-1" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
     <div class="modal-dialog modal-lg">
       <div class="modal-header">
         <button class="close" type="button" data-dismis="modal" aria-label="Close">
             <span aria-hidden="true">×</span>
         </button>
          <h4 class="modal-title text-center">Levis Jeans</h4>
       </div>
       <div class="modal-body">
         <div class="container-fluid">
           <div class="row">
              <div class="col-sm-6">
                <div class="center-block">
                  <img src="foto/products/men4.png" alt="Levis Jeans" class="details img-responsive">
                </div>
              </div>
              <div class="col-sm-6">

              </div>
           </div>
         </div>
       </div>
     </div>
   </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      jQuery(window).scroll(function(){
        var vscroll = jQuery(this).scrollTop();
        jQuery('#header-text').css({
          "transform" : "translate(0px, "v+scroll/2+"px)"
        });
      });
    </script>
  </body>
</html>


avatar fadhil sanad
@fadhil sanad

270 Kontribusi 16 Poin

Diperbarui 6 tahun yang lalu

3 Jawaban:

Jawaban Terpilih

bootstrap.js nya ditaruh bawah juga gan setelah jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

kalo ga gitu bootstrapnya ga mau jalan.

trus kalo mau binding event seperti scroll, baiknya diwrap sama document.ready() supaya ga jalan sebelum element siap di DOM.

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 6 tahun yang lalu

masih sama gan hehe

avatar fadhil sanad
@fadhil sanad

270 Kontribusi 16 Poin

Dipost 6 tahun yang lalu

udah work gan thanks

avatar fadhil sanad
@fadhil sanad

270 Kontribusi 16 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban