Question

我正在从Bootstrap应用modal但它没有正确关闭。当我点击右上角的关闭按钮时，它会崩溃，当我点击模态上的任何其他位置时它会正常关闭。我尝试了很多次，但这个问题是不变的。

＆＃13;

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); 
}

＆＃13;

<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>

＆＃13;

Answer 1

如您所见，您已将数据目标属性设置为 modal1 div，因此您需要具有单独的div <div id="modal1"></div>，您可以放置您评论的内容。

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

基本上，您已将自己的内容放入课程中，以便切换弹出窗口，然后将其放在<div id="modal1"></div>中，其余的都可以。

请尝试以下代码。我希望这会对你有所帮助。

<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>

Answer 2

删除

中的aria-hidden =“true”

×

我正在从Bootstrap应用modal，但它没有正确关闭

2 个答案: