模态对话框不希望再次关闭

Question

我使用模态来加载CKEditor。当我按下按钮时，选定的模态将被加载。 然后，我按下一个按钮以加载第二个模态。 这也可以正常工作，我可以顺利关闭它。 但是，当我再次打开第一个时，它不再想要关闭了……但是我找不到原因。 问题是什么？

<!-- The Modal -->
        <div id="myModalBesc" class="modal">
          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header">
              <span class="close">X</span>
              <h2>Beschrijving:</h2>
            </div>
            <div class="modal-body">
                    <br>
                    <textarea name='beschrijving' style='width: 400px;height:100px;'></textarea>
                    <br>
            </div>
            <div class="modal-footer">
              <h3>Klik op 'X' om te sluiten</h3>
            </div>
          </div>
        </div>

<!-- The Modal -->
        <div id="myModalSpec" class="modal">
          <!-- Modal content -->
          <div class="modal-content">
            <div class="modal-header">
              <span class="close">X</span>
              <h2>Specificaties:</h2>
            </div>
            <div class="modal-body">
                    <br>
                    <textarea name='specificaties' style='width: 400px;height:100px;'></textarea>
                    <br>
            </div>
            <div class="modal-footer">
              <h3>Klik op 'X' om te sluiten</h3>
            </div>
          </div>
        </div>

<!-- Trigger/Open The Modal Beschrijving-->
<button id="myBtnBesc" onclick="ModalBesc();">Open WYSIWYG</button>

<!-- Trigger/Open The Modal Specificaties-->
<button id="myBtnSpec" onclick="ModalSpec();">Open WYSIWYG</button>

<script type="text/javascript">
        function ModalBesc() {
            CKEDITOR.replace( 'beschrijving' );
            var modal = document.getElementById('myModalBesc'); 
            var btn = document.getElementById("myBtnBesc");
            var span = document.getElementsByClassName("close")[0];

            btn.onclick = function() {    
                modal.style.display = "block";
            }

            span.onclick = function() {
                modal.style.display = "none";
            }

            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }

        function ModalSpec() {
            CKEDITOR.replace( 'specificaties' );
            var modal = document.getElementById('myModalSpec'); 
            var btn = document.getElementById("myBtnSpec");
            var span = document.getElementsByClassName("close")[0];

            btn.onclick = function() {    
                modal.style.display = "block";
            }

            span.onclick = function() {
                modal.style.display = "none";
            }

            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }
</script>

请帮帮我！ 提前致谢...

Answer 1

 function ModalBesc() { // CKEDITOR.replace( 'specificaties' ); $("#myModalBesc").modal("show"); } function ModalSpec() { // CKEDITOR.replace( 'specificaties' ); $("#myModalSpec").modal("show"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- The Modal --> <div id="myModalBesc" class="modal fade" role="dialog"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">X</button> <h2>Beschrijving:</h2> </div> <div class="modal-body"> <br> <textarea name='beschrijving' style='width: 400px; height: 100px;'></textarea> <br> </div> <div class="modal-footer"> <h3>Klik op 'X' om te sluiten</h3> </div> </div> </div> <!-- The Modal --> <div id="myModalSpec" class="modal fade" role="dialog"> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">X</button> <h2>Specificaties:</h2> </div> <div class="modal-body"> <br> <textarea name='specificaties' style='width: 400px;height:100px;'></textarea> <br> </div> <div class="modal-footer"> <h3>Klik op 'X' om te sluiten</h3> </div> </div> </div> <!-- Trigger/Open The Modal Beschrijving--> <button id="myBtnBesc" onclick="ModalBesc(); return false;">Open WYSIWYG</button> <!-- Trigger/Open The Modal Specificaties--> <button id="myBtnSpec" onclick="ModalSpec(); return false;">Open WYSIWYG</button>