单击按钮时不允许 Bootstrap 4 模式消失

Question

我在我的网站上使用 Bootstrap 4 模式。 在该模式中，我有 2 个按钮：计算和发送。

我不希望单击计算时窗口消失。 我怎样才能做到这一点？

我试图将模态的属性更改为display:block; 当我点击计算但它不起作用。

这是模态的代码。

<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">SEND AN ORDER</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form action="" class="form-group">
          <div class="form-group">
            <input type="text" placeholder="First name" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" placeholder="Last name" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" placeholder="Organisation(optional)" class="form-control">
          </div>
          <div class="form-group">
            <select class="form-control" id="meat">
              <option value="" selected disabled>Please select a meat</option>
              <?php
              foreach ($res as $meat) {
              ?>
              <option value="<?php echo $meat->name.';'.$meat->price_per_kg;?>"><?=$meat->name;?></option>
              <?php
              }
              ?>
            </select>
          </div>
          <div class="form-group">
            <input type="number" class="form-control" id="quantity" placeholder="Quantity(in Kg)" min="5">
          </div>
          <div class="form-group">
            <div class="ui labeled input">
              <div class="ui label">
                +250
              </div>
              <input type="text" placeholder="Phone number" name="phone_n">
            </div>
          </div>
          <div class="form-group">
            <input type="email" placeholder="Email" name="email" class="form-control">
          </div>
          <div class="form-group">
            <textarea name="add_info" name="add_info" cols="40" class="form-control" rows="5" placeholder="Additional infos(place to deliver,...)"></textarea>
          </div>

          <button class="btn btn-zco btn-md"  id="calculate">Calculate</button>

          <button class="btn btn-zco btn-block">SEND</button>
        </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

Answer 1

问题是您的 数据属性，它指示引导程序的 JS 关闭模态。

<button class="btn btn-zco btn-md" 
    data-target="#myModal" data-toggle="modal" - <---- Remove these two attributes
    data-backdrop="static" data-keyboard="false" id="calculate">Calculate</button>

Answer 2

使计算按钮类似于发送按钮并删除data-toggle="modal"和data-target="#myModal"例如。

<button class="btn btn-zco btn-md" id="calculate" >Calculate</button>