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

我删除了bootstrap css，只需为模态添加css。 这对您的问题来说不是完全足够的解决方案，但您可以从此开始并修改。