Jump to content


Photo

Detail modal part not working using bootstrap


  • Please log in to reply
4 replies to this topic

#1 php75

php75
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 31 December 2016 - 06:10 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...

<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.googlea...n.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> 



#2 benanamen

benanamen
  • Members
  • PipPipPip
  • Master Coder
  • 1,194 posts

Posted 31 December 2016 - 07:13 PM

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 by benanamen, 31 December 2016 - 07:19 PM.

To save time, let's just assume I am never wrong.

The XY Problem
The XY problem is asking about your attempted solution (X) rather than your actual problem (Y). This leads to enormous amounts of wasted time and energy, both on the part of people asking for help, and on the part of those providing help.


Make A Donation https://www.paypal.me/KevinRubio

#3 php75

php75
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 02 January 2017 - 07:25 AM

As you told i tried but still not working :(..


Edited by php75, 02 January 2017 - 07:25 AM.


#4 php75

php75
  • New Members
  • Pip
  • Newbie
  • 9 posts

Posted 03 January 2017 - 05:50 PM

still not working..Please help to solve this program



#5 benanamen

benanamen
  • Members
  • PipPipPip
  • Master Coder
  • 1,194 posts

Posted 03 January 2017 - 06:51 PM

What have you done with the information you were given? Show the updated code. The fix can't be any simpler, delete a dash.


To save time, let's just assume I am never wrong.

The XY Problem
The XY problem is asking about your attempted solution (X) rather than your actual problem (Y). This leads to enormous amounts of wasted time and energy, both on the part of people asking for help, and on the part of those providing help.


Make A Donation https://www.paypal.me/KevinRubio




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users