Bootstrap模式在应用display：none时不显示，然后display：block to parent div

问题描述：

这里是我的代码。现在我正在改变类col-sm-6的div的属性，点击一个可以变成显示的按钮：none使用jquery。点击另一个按钮后，我将其更改回阻止，但模式未打开。背景变暗，但窗口无法打开。基本上最外面的div得到显示：无，然后显示：块。但模态从未改变。可能的解决方案是什么？提前致谢。Bootstrap模式在应用display：none时不显示，然后display：block to parent div

<div class="col-sm-6 col-md-4" id="challange"> 
         <div class="alert card alert-dismissible fade show" role="alert"> 
          <div class="cardAlert-header"> 
           <h5 class="title">Challange</h5> 
           <button type="button" class="close" aria-label="Close"> 
            <i class="fa fa-close" aria-hidden="true"></i> 
           </button> 
          </div> 
          <div class="card-block"> 
           <div class="view"> 
            <a class="rounded mx-auto d-block" data-toggle="modal" data-target="#ChartForChallenge"> 
             <img src="img/dashboard/walking-the-dog.svg" class="rounded mx-auto d-block"> 
            </a> 
           </div> 
          </div> 
         </div> 
         <!-- Central Modal Medium Warning --> 
         <div class="modal fade" id="ChartForChallenge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
          <div class="modal-dialog modal-notify modal-info modal-lg" role="document"> 
           <!--Content--> 
           <div class="modal-content"> 
            <!--Header--> 
            <div class="modal-header"> 
             <i class="fa fa-bars"></i> 
             <p class="heading lead">Pet Activity</p> 
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
              <span aria-hidden="true" class="white-text">&times;</span> 
             </button> 
            </div> 
            <!--Body--> 
            <div class="modal-body"> 
             <div class="text-center"> 
              <!-- Nav tabs --> 
              <ul class="nav nav-tabs md-pills pills-default" role="tablist"> 
               <li class="nav-item"> 
                <a class="nav-link active" data-toggle="tab" href="#Giorno" role="tab">Giorno</a> 
               </li> 
               <li class="nav-item"> 
                <a class="nav-link" data-toggle="tab" href="#Settmana" role="tab">Settmana</a> 
               </li> 
              </ul> 
              <!-- Tab panels --> 
              <div class="main-content"> 
               <p class="head">Ogg 10:47AM</p> 
               <div class="row"> 
                <div class="col-6"> 
                 <img src="img/dashboard/walking-the-dog.svg" height="120px" width="120px"> 
                 <span class="title">Marco</span> 
                </div> 
                <div class="col-6"> 
                 <img src="img/dashboard/dog.svg" height="120px" width="120px"> 
                 <span class="title">Fiamma</span> 
                </div> 
               </div> 
              </div> 
              <div class="tab-content"> 
               <!--Panel 1--> 
               <div class="tab-pane fade in show active" id="Giorno" role="tabpanel"> 
                <br> 
                <div id="petHealth" class="chart"> 
                 <svg style="min-height: 220px;"></svg> 
                </div> 
               </div> 
               <!--/.Panel 1--> 
               <!--Panel 3--> 
               <div class="tab-pane fade" id="Settmana" role="tabpanel"> 
                <br> 
                <div id="petHealthDetails" class="chart"> 
                 <svg></svg> 
                </div> 
               </div> 
               <!--/.Panel 3--> 
              </div> 
             </div> 
            </div> 
            <!--Footer--> 
            <div class="modal-footer justify-content-center"> 
             <div class="col-6"> 
              <span>8</span> 
              <p>Number passed</p> 
             </div> 
             <div class="col-6"> 
              <span>18</span> 
              <p>Number passed</p> 
             </div> 
            </div> 
           </div> 
           <!--/.Content--> 
          </div> 
         </div>

答

，如果你想要的是这种方法试试这个代码。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <div class="col-sm-6 col-md-4" id="challange"> 
 
     <div class="alert card alert-dismissible fade show" role="alert"> 
 
     <div class="cardAlert-header"> 
 
      <h5 class="title">Challange</h5> 
 
      <button type="button" class="close" aria-label="Close"> 
 
      <i class="fa fa-close" aria-hidden="true"></i> 
 
      </button> 
 
     </div> 
 
     <div class="card-block"> 
 
      <div class="view"> 
 
       <a class="rounded mx-auto d-block" data-toggle="modal" data-target="#ChartForChallenge"> 
 
       <img src="img/dashboard/walking-the-dog.svg" class="rounded mx-auto d-block"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- Central Modal Medium Warning --> 
 
     <div class="modal fade" id="ChartForChallenge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
     <div class="modal-dialog modal-notify modal-info modal-lg" role="document"> 
 
      <!--Content--> 
 
      <div class="modal-content"> 
 
       <!--Header--> 
 
       <div class="modal-header"> 
 
        <i class="fa fa-bars"></i> 
 
        <p class="heading lead">Pet Activity</p> 
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true" class="white-text">&times;</span> 
 
        </button> 
 
       </div> 
 
       <!--Body--> 
 
       <div class="modal-body"> 
 
        <div class="text-center"> 
 
        <!-- Nav tabs --> 
 
        <ul class="nav nav-tabs md-pills pills-default" role="tablist"> 
 
         <li class="nav-item"> 
 
          <a class="nav-link active" data-toggle="tab" href="#Giorno" role="tab">Giorno</a> 
 
         </li> 
 
         <li class="nav-item"> 
 
          <a class="nav-link" data-toggle="tab" href="#Settmana" role="tab">Settmana</a> 
 
         </li> 
 
        </ul> 
 
        <!-- Tab panels --> 
 
        <div class="main-content"> 
 
         <p class="head">Ogg 10:47AM</p> 
 
         <div class="row"> 
 
          <div class="col-6"> 
 
           <img src="img/dashboard/walking-the-dog.svg" height="120px" width="120px"> 
 
           <span class="title">Marco</span> 
 
          </div> 
 
          <div class="col-6"> 
 
           <img src="img/dashboard/dog.svg" height="120px" width="120px"> 
 
           <span class="title">Fiamma</span> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="tab-content"> 
 
         <!--Panel 1--> 
 
         <div class="tab-pane fade in show active" id="Giorno" role="tabpanel"> 
 
          <br> 
 
          <div id="petHealth" class="chart"> 
 
           <svg style="min-height: 220px;"></svg> 
 
          </div> 
 
         </div> 
 
         <!--/.Panel 1--> 
 
         <!--Panel 3--> 
 
         <div class="tab-pane fade" id="Settmana" role="tabpanel"> 
 
          <br> 
 
          <div id="petHealthDetails" class="chart"> 
 
           <svg></svg> 
 
          </div> 
 
         </div> 
 
         <!--/.Panel 3--> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <!--Footer--> 
 
       <div class="modal-footer justify-content-center"> 
 
        <div class="col-6"> 
 
        <span>8</span> 
 
        <p>Number passed</p> 
 
        </div> 
 
        <div class="col-6"> 
 
        <span>18</span> 
 
        <p>Number passed</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <!--/.Content--> 
 
     </div> 
 
     </div> 
 
     <button style="margin:7px 15px 17px 0;" type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#ChartForChallenge">Click To Open Modal</button> 
 
    </body> 
 
</html>

是的，我做到了已经。谢谢，虽然。 –

Bootstrap模式在应用display：none时不显示，然后display：block to parent div

相关推荐