After closing modal using X, have to click it twice to reopen it

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> 

I have this code for in which I've created a readme modal, If I click outside the modal it closes and I can reopen it with just a single click of the readme link, however if I close the modal using the 'X' I have to click the readme link twice to get it to reopen.
I can't figure it out, and yes, I'm really new to this as well...

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> 

I removed bootstrap css and just add need css for modal. This is not completely enough solution for your problem but you can start from this and modify.