Reputation: 103

I am applying modal from Bootstrap but it is not closing properly

I am applying modal from Bootstrap but it is not closing properly. When I click on close button on top-right, it crashes and when I click anywhere else on modal it closes normally. I tried many times but this problem is constant.

html,
body {
  height: 100%;  

}
body {
  padding-top: 20px;    
  background: #f9e0b5 ;
  background-size:100%;
  background-repeat: repeat-y; 
}  
.pro{
  background:linear-gradient(white, #e7d5b5);  
  margin:10px 40px 0px;
  height:250px;
  border-radius:30px;
  box-shadow:5px 5px 5px black;
  cursor:pointer;
}
#pro4{
  position:relative;
  left:370px;
}
.pro-caption{
  font-size:17px;
  font-weight:bold;
  font-family:"Comic Sans MS", cursive, sans-serif;
  color:#6b412b;
  background:linear-gradient(white, #f5e5d7); 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- row starts-->
<div class="row">             

  <div class="col-md-3 pro" data-toggle="modal" data-target="#modal1">

    <!--modal1-->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog"> 

<!--modal1 content--> 

    <div class="modal-content">
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"            aria-hidden="true">&times;</button>
        <h3 class="modal-title"> Fresh Milk:Bru Gold Coffee     Machine</h3>
      </div>
      <div class="modal-body"> 

        <img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
        <h4><u><b>Key Features:</b></u></h4>

      </div>

    </div>
  </div></div> 
<figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
<figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>


</div> 
</div>

Upvotes: 0

Answers (2)

Sanjay Chaudhary

Reputation: 151

As you can see, you have set the data-target property to modal1 div, so you need to have seperate div i.e <div id="modal1"></div> where you can place your content which you have commented.

<div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>

Basically you have placed your content in the class that toggles the popup which you need to take that out and place it in <div id="modal1"></div>, the rest is fine.

Please try below code. I hope this helps you.

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- row starts-->

        <style>
            html,
            body {
                height: 100%;  

            }

            body {
                padding-top: 20px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */    
                background: #f9e0b5 /*#f9cf86*/ ;
                background-size:100%;
                background-repeat: repeat-y; 
            }  


            .pro{

                background:linear-gradient(white, #e7d5b5);  
                margin:10px 40px 0px;
                height:250px;
                border-radius:30px;
                box-shadow:5px 5px 5px black;
                cursor:pointer;

            }
            #pro4{
                position:relative;
                left:370px;
            }

            .pro-caption{
                font-size:17px;
                font-weight:bold;
                font-family:"Comic Sans MS", cursive, sans-serif;
                color:#6b412b;
                background:linear-gradient(white, #f5e5d7); 
            }
        </style>

    </head>

    <body>

        <div class="row">             

            <div class="col-md-3 pro" data-toggle="modal" data-target="#modal1"></div>

            <div id="modal1" class="modal fade" role="dialog">
                <div class="modal-dialog">


                    <div class="modal-content">
                        <div class="modal-header"> 
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3 class="modal-title"> Fresh Milk:Bru Gold Coffee     Machine</h3>
                        </div>
                        <div class="modal-body"> 

                            <img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px">
                            <h4><u><b>Key Features:</b></u></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <figure><img class="image-responsive" src="images/products/Fresh-Milk-Bru-Gold-Coffee-Machine.png" height="270px"></figure>
    <figcaption class="pro-caption"> Fresh Milk:Bru Gold Coffee Machine</figcaption>

<!--modal over-->`
</body>
</html>

Upvotes: 2

amit bende

Reputation: 264

remove aria-hidden="true" in your

Upvotes: 0

I am applying modal from Bootstrap but it is not closing properly

Answers (2)

Related Questions