单击按钮

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

问题是你的data attributes，它指示bootstrap的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>