Disallow Bootstrap 4 modal to disappear when clicking a button

Question

I'm using a Bootstrap 4 modal on my website. In that modal I have 2 buttons: calculate and send.

I don't want that the window disappears when I click to calculate. How can I do that?

I tried to change the property of the modal to display:block; when I click to calculate but it doesn't work.

Here is the code of the modal.

<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

The issue is your data attributes , which instruct bootstrap's JS to close the modal.

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