如何在按钮单击时从 php 中的引导程序弹出一个模态

Question

i want to popup a modal from bootstrap on a button click from my php script.hereis the script but on clicking the modal is not popping up .

<?php
include 'partials/_dbconnect.php';
$sql="SELECT * FROM `TABLE NAME`";
$result=mysqli_query($conn,$sql);
while ($res = mysqli_fetch_array($result))
{
    $item=$res['itemname'];
    $where=$res['address'];
    $qty=$res['quantity'];
    $qtym=$res['quantity_m'];
    $sta=$res['state'];
echo
   '
   <div class="card text-center text-white bg-dark mb-3 mt-3 style="max-width: 18rem;">
        <div class="card-body">
            <h5 class="card-header">' . $item . ' available </h5><br>
            <p class="card-text ">Location - ' . $where . ' , ' . $sta . ' <br> Quantity - ' . $qty . ' ' . $qtym . ' </p>

            <button type="button" class="btn btn-outline-primary outline" data-toggle="modal" data-target="#exampleModalCenter">
                Recieve
            </button>
        </div>
    </div>
   
';
}

?>

Answer 1

添加 bootstrap 脚本和 css ，参考这里

Answer 2

   <?php
include 'partials/_dbconnect.php';
$sql="SELECT * FROM `TABLE NAME`";
$result=mysqli_query($conn,$sql);
while ($res = mysqli_fetch_array($result))
{
    $item=$res['itemname'];
    $where=$res['address'];
    $qty=$res['quantity'];
    $qtym=$res['quantity_m'];
    $sta=$res['state'];
echo
   '
   <div class="card text-center text-white bg-dark mb-3 mt-3 style="max-width: 18rem;">
        <div class="card-body">
            <h5 class="card-header">' . $item . ' available </h5><br>
            <p class="card-text ">Location - ' . $where . ' , ' . $sta . ' <br> Quantity - ' . $qty . ' ' . $qtym . ' </p>

            <button type="button" class="btn btn-outline-primary outline" data-toggle="modal" data-target="#exampleModalCenter">
                Recieve
            </button>
        </div>
    </div>
   
';
}

?>

<div class="modal" tabindex="-1" id="exampleModalCenter" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Try this