单独文件上的引导模式不会关闭答案

【问题标题】：Bootstrap modal on a separated file doesn't close单独文件上的引导模式不会关闭
【发布时间】：2019-11-24 00:35:49
【问题描述】：

我正在使用 bootstrap 中的 modal。模式打开，但没有使用十字或关闭按钮关闭。

这是我的 index.php 文件中的内容：

<div id="editar" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
</div>

这是一个单独的 .php 文件中的模式：

<div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Editar Accion</h4>
                <button type="button" class="close" data-dismiss="modal" id="cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="editar" value="<?php echo $id; ?>">
                <div class="form-group">
                    <label for="item_name">Accion:</label>
                    <input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">

                </div>
            </div>
        <div class="modal-footer">
                <button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
                <button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
            </div>
    </div>
</div>

我必须将它们保存在两个文件中。

【问题讨论】：

您好，有几个问题。（1）当它们在同一个文件中时它是否正常工作？ (2) 你确定你在第一个模态 div 中包含 include 或 require 的模态。 (3) 模态打开正常但不关闭？您能否包括调用模态的位。
是的，我在同一个文件中有另一个模式并且它可以工作，但是这个特别是我必须将它保存在 2 个文件中 php.ini 文件。模态打开但不关闭，“取消”按钮也不起作用，接下来我有另一个按钮是保存版本，它工作得很好
我有一个问题，模态的包含或要求是什么？
我试过你的代码添加一个按钮来调用模式并将模式放在一个单独的 php 文件中并且它可以工作，所以你在这里发布的代码不是问题。 include 或 require 我的意思是你如何将模式添加到 index.php 中，因为你说你有它在两个单独的文件中？您必须在<div id="editar"></div> 中执行类似include "editar_modal.php" 的操作。我认为最好发布整个代码（两个文件），这样我就可以自己尝试一下，看看哪里出了问题。
很难将第二页的模态引用到第一页。最好在一个页面中调用这两种方法，然后在按钮上单击显示模式弹出窗口。

标签： php html css bootstrap-4

【解决方案1】：

如果您注意到我的评论，我已经告诉过您使用两个不同的页面会很头疼。也不推荐这种方式。

我为您创建了一个按钮，在该按钮上单击该模式会显示取消按钮，当您单击它时该按钮会消失。这正是你以后想要的方式。

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Click Me
  </button>

  
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Editar Accion</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <input type="hidden" name="editar" value="<?php echo $id; ?>">
          <div class="form-group">
                    <label for="item_name">Accion:</label>
                    <input type="text" class="form-control" id="accion" value="<?php echo $accion; ?>">
              
                </div>
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
             <button type="button" class="btn btn-primary mb-3" name="update" id="btn-editar"><span class="glyphicon glyphicon-edit"></span> Editar</button>
                <button type="button" class="btn btn-secondary mb-3" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancelar</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

希望这会有所帮助。

【讨论】：

【解决方案2】：

我认为最好使用JQuery，这样您就可以更好地控制关闭时模式上发生的事情（例如：清除字段等）。

$(document).on('click','#button_id',function(e){
   e.preventDefault();
   //you can clear fields first if you need to
   $('#accion').val('');
   $('#modal_id').hide(); //close modal
});

请记住将文件包含在index.php 中。将模态保存在单独的文件中将有助于您在代码中的某处重用相同的内容，也就是说，如果您保持模态代码足够动态。

【讨论】：