Postingan lainnya
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>
0
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.
0