Detail modal part not working using bootstrap
Posted: Sat Dec 31, 2016 12:12 pm
hi to all,
I have tried this coding by using bootstrap.once i clicked the detail button in modal part(bootstrap) its not shown anything..I couldn't find the errors.Can anyone tell what is the error...
I have tried this coding by using bootstrap.once i clicked the detail button in modal part(bootstrap) its not shown anything..I couldn't find the errors.Can anyone tell what is the error...
Code: Select all
<html>
<head>
<title>practice site</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-----NavBar----->
<nav class="navbar navbar-default navbar-fixedtop">
<div class="container-fluid">
<a href="index.php" class="navbar-brand">Basic demo site</a>
<ul class="nav navbar-nav">
<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>
</ul>
</li>
</ul>
</div>
</nav>
<!---Header------>
<div id="headerwrapper">
<div id="back-flower"></div>
<div id="logotext"></div>
<div id="for-flower"></div>
</div>
<div class="container-fluid">
<!---left sidebar --->
<div class="col-md-2">
Left side bar</div>
<!----main content-->
<div class="col-md-8">
<div class="row">
<h2 class="text-center">Features</h2>
<div class="col-md-3">
<h4>Levis Jeans</h4>
<img src="images/products/men4.png" alt=" jeans" class="img-thumb">
<p class="price">Our price : $34.99</p>
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#-details-1">Details</button>
</div>
</div></div>
<!--right side bar--->
<div class="col-md-2">Right Side bar</div>
</div>
<!---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-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"> 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="images/products/men4.png" class="details img-responsive">
</div>
</div>
<div class="col-sm-6">
<h4>Details </h4>
<hr>
<p>34</p>
<p>Brand</p>
<form action="add_cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quantity:</label>
<input type="text" class="form-control" id="quantity" name="quantity">
<p>Available: 3</p>
</div>
<div class="form-group">
<label for="size">Size:</label>
<select name="size" id="size" class="form-control">
<option value=""></option>
<option value="28">28</option>
<option value="32">32</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-warning" type="submit"><span class="glphicon glphicon-shopping-cart"></span></button>
</div>
</div>
</div>
</div>
<script>
jQuery(window).scroll(function(){
var vscroll=jQuery(this).scrollTop();
jQuery('#logotext').css(
{
"transform" :"translate(0px,"+vscroll/2+"px)"
});
var vscroll=jQuery(this).scrollTop();
jQuery('#back-flower').css(
{
"transform" :"translate("+vscroll/5+"px","+vscroll/12+"px)"
});
var vscroll=jQuery(this).scrollTop();
jQuery('#for-flower').css(
{
"transform" :"translate(0px,"+vscroll/2+"px)"
});
});
</script>
</body>
</html>