使用X關閉模式後，必須點擊它兩次，以重新打開它

Question

//Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
<div style="padding: 5px;"> 
 
    
 
    <a href="${pageContext.request.contextPath}/">Home</a> 
 
    | 
 
    <a href="${pageContext.request.contextPath}/ExaNonProd?exaType=NWHX4">NWH X4</a> 
 
    | 
 
    <a href="${pageContext.request.contextPath}/ExaNonProd?exaType=NWHX6">NWH X6</a> 
 
    | 
 
    <a href="${pageContext.request.contextPath}/ExaProd?exaType=NDCX4">NDC X4</a> 
 
    | 
 
    <a href="${pageContext.request.contextPath}/ExaNonProd?exaType=NDCX6">NDC X6</a> 
 
    | 
 
    <a href="#" data-toggle="modal" data-target="#myModal">ReadMe</a> 
 

 
</div> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">&times;</span> 
 
     <h2>Exadata Capacity Read Me</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>Some text in the Modal Body</p> 
 
     <p>Some other text...</p> 
 
    </div> 
 
    </div> 
 

 
</div>

我有這樣的代碼中，我創建了一個自述模式， 如果我點擊外模態它關閉我可以用自述的鏈接只是一個單一的點擊重新打開它，但是 如果我關閉使用「X」我必須點擊兩次自述環節得到它重新打開該模式。
我不出來，是的，我真的很新本，以及...

Answer 1

.modal { 
 
     position: fixed; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     z-index: 1050; 
 
     display: none; 
 
     overflow: hidden; 
 
     -webkit-overflow-scrolling: touch; 
 
     outline: 0; 
 
    } 
 

 
    .modal-dialog { 
 
     width: 600px; 
 
     margin: 30px auto; 
 
     position: relative; 
 
     background-color: #fff; 
 
     -webkit-background-clip: padding-box; 
 
     background-clip: padding-box; 
 
     border: 1px solid #999; 
 
     border: 1px solid rgba(0,0,0,.2); 
 
     border-radius: 6px; 
 
     outline: 0; 
 
     -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); 
 
     box-shadow: 0 3px 9px rgba(0,0,0,.5) 
 
    } 
 

 
    .modal-body { 
 
     position: relative; 
 
     padding: 15px; 
 
    } 
 

 
    .modal-header { 
 
     padding: 15px; 
 
     border-bottom: 1px solid #e5e5e5; 
 
    } 
 

 
    .close { 
 
     float: right; 
 
     font-size: 21px; 
 
     font-weight: 700; 
 
     line-height: 1; 
 
     color: #000; 
 
     text-shadow: 0 1px 0 #fff; 
 
     filter: alpha(opacity=20); 
 
     opacity: .2; 
 
    } 
 

 
    button.close { 
 
     -webkit-appearance: none; 
 
     padding: 0; 
 
     cursor: pointer; 
 
     background: 0 0; 
 
     border: 0; 
 
    }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
      
 
     <div style="padding: 5px;"> 
 
      
 
      <a href="${pageContext.request.contextPath}/">Home</a> 
 
      | 
 
      <a href="${pageContext.request.contextPath}/ExaNonProd?exaType=NWHX4">NWH X4</a> 
 
      | 
 
      <a href="${pageContext.request.contextPath}/ExaNonProd?exaType=NWHX6">NWH X6</a> 
 
      | 
 
      <a href="${pageContext.request.contextPath}/ExaProd?exaType=NDCX4">NDC X4</a> 
 
      | 
 
      <a href="${pageContext.request.contextPath}/ExaNonProd?exaType=NDCX6">NDC X6</a> 
 
      | 
 
      <a href="#" data-toggle="modal" data-target="#myModal">ReadMe</a> 
 

 
     </div> 
 

 
     <!-- The Modal --> 
 
     <div id="myModal" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog" role="document"> 
 
      <!-- Modal content --> 
 
      <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h2>Exadata Capacity Read Me</h2> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Some text in the Modal Body</p> 
 
       <p>Some other text...</p> 
 
      </div> 
 
      </div> 
 
    </div> 
 
     </div>

我刪除引導CSS和只添加需要的CSS模式。 這不是你的問題完全夠用瞭解決方案，但你可以從這個開始和修改。