Page 1 of 1

Detail modal part not working using bootstrap

Posted: Sat Dec 31, 2016 12:12 pm
by php75
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...

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">&times;</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>

Re: Detail modal part not working using bootstrap

Posted: Tue Jan 03, 2017 11:48 am
by php75
can anyone tell ?I couldn't find out errors...