php75 Posted December 31, 2016 Share Posted December 31, 2016 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...<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> Quote Link to comment https://forums.phpfreaks.com/topic/302842-detail-modal-part-not-working-using-bootstrap/ Share on other sites More sharing options...
benanamen Posted December 31, 2016 Share Posted December 31, 2016 (edited) You have a typo in your data-target for the details button. There is a dash that does not belong there after the #. WRONG data-target="#-details-1" CORRECT data-target="#details-1" You also have a separate bracket problem in the scroll JS. And next time use the code tags. Edited December 31, 2016 by benanamen Quote Link to comment https://forums.phpfreaks.com/topic/302842-detail-modal-part-not-working-using-bootstrap/#findComment-1540916 Share on other sites More sharing options...
php75 Posted January 2, 2017 Author Share Posted January 2, 2017 (edited) As you told i tried but still not working .. Edited January 2, 2017 by php75 Quote Link to comment https://forums.phpfreaks.com/topic/302842-detail-modal-part-not-working-using-bootstrap/#findComment-1540940 Share on other sites More sharing options...
php75 Posted January 3, 2017 Author Share Posted January 3, 2017 still not working..Please help to solve this program Quote Link to comment https://forums.phpfreaks.com/topic/302842-detail-modal-part-not-working-using-bootstrap/#findComment-1540985 Share on other sites More sharing options...
benanamen Posted January 3, 2017 Share Posted January 3, 2017 What have you done with the information you were given? Show the updated code. The fix can't be any simpler, delete a dash. Quote Link to comment https://forums.phpfreaks.com/topic/302842-detail-modal-part-not-working-using-bootstrap/#findComment-1540997 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.