Question

我正在使用引导程序中的 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>

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

Answer 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>

希望这会有所帮助。

Answer 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中。将模式保持在单独的文件中将有助于您在代码的某处重复使用相同的模式，也就是说，如果您使模式代码保持足够的动态性。

分隔文件上的引导程序模式不会关闭

2 个答案: