how to popup a modal from bootstrap in php on button click-CodePudding

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 max-width: 18rem;">
        <div >
            <h5 >' . $item . ' available </h5><br>
            <p >Location - ' . $where . ' , ' . $sta . ' <br> Quantity - ' . $qty . ' ' . $qtym . ' </p>

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

?>

CodePudding user response：

Add bootstrap script and css ,refer here

CodePudding user response：

   <?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 max-width: 18rem;">
        <div >
            <h5 >' . $item . ' available </h5><br>
            <p >Location - ' . $where . ' , ' . $sta . ' <br> Quantity - ' . $qty . ' ' . $qtym . ' </p>

            <button type="button"  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