How to added different content in same model box of bootstrap.

Hi guy's
Today I discuss with you that how to load your different content in the same model box with the help of PHP and javascript so let's get started now.

1. Firstly Create a database.
A. Start the Wamp server.
B. Type localhost/PHPMyAdmin in browser URL.
C. Create a new database.
D. Create a new table in this database.
E. Insert Some rows manually.

2. After that Create a file of demo.php name and write up some code now


<?php

//Connect database.

$mysqli = new mysqli('localhost', 'root', '', 'dbname');



if (isset($_GET['id'])) {

 $id = addslashes(trim($_GET['id']));  //get id

 $query = $mysqli->query("select * from data where sno = ".(int)$id); //select table

 $row = $query->fetch_assoc(); //Fetch rows

 echo json_encode($row); // return json

}else{

 ?>

<html>

<head>

 <title>Your title</title>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <style type="text/css">

  .modal-header-info {

      color:#fff;

      padding:9px 15px;

      border-bottom:1px solid #eee;

      background-color: #5cb85c;

      -webkit-border-top-left-radius: 5px;

      -webkit-border-top-right-radius: 5px;

      -moz-border-radius-topleft: 5px;

      -moz-border-radius-topright: 5px;

       border-top-left-radius: 5px;

       border-top-right-radius: 5px;

  }

 </style>

</head>

<body>

<!--Manual add buttons -->

<h2> Manual buttons</h2>

<button data-toggle="modal" data-target=".bd-example-modal-lg" onclick="fun(1, this)">Btn1</button>

<button data-toggle="modal" data-target=".bd-example-modal-lg" onclick="fun(2, this)">Btn2</button>

<br><br>

<!-- Generate by database -->

<h3>Btn generate by db</h3>

<?php

$str = '';

$selectqry = $mysqli->query("select sno from data order by sno asc");

while($result = $selectqry->fetch_assoc()){

$str .= '<button data-toggle="modal" data-target=".bd-example-modal-lg" onclick="fun('.$result['sno'].', this)">Btn '.$result['sno'].'</button>';

}

echo $str;

?>









<!-- Modal -->

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg">

    <div class="modal-content">

      <div class="modal-header modal-header-info text-center">

        <h5 class="modal-title" id="exampleModalLongTitle">About <i class="fa fa-info-circle"></i></h5>

      </div>

      <div class="modal-body">



       <p style="text-align: center;" class="text-color">

        <span class="name" style="font-weight: bold; font-size: 1.5em;"></span><br>

        <span class="post"></span><br>

        <span class="education"></span>

       </p>

       <br>

        <p class="datafull text-justify"></p>

      </div>



      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>



<script>

 function fun(a, obj) {

 $.get('demo.php?id=' + a, function(data) {

  var t = JSON.parse(data); //Parse data which is return by php in json form

  $('.name').html(t.name); //load content to class name

  $('.datafull').html(t.about); //load content to class datafull

  $('.education').html(t.education); //load content to class education

  $('.post').html(t.post); //load content to class post

 });

}

</script>



</div>

 </body>

           </html>

<?php  } ?>





3.  When you run this code then you just see it

Now click the first button then you see your model box with Content which is fetch to your database.
and again click another button then you get another popup with different Content.

It's Magic. I think it will help you. So Enjoy.

Thank You.

Search This Blog

Codeadda

How to added different content in same model box of bootstrap.

Comments

Post a Comment