title: How can I get the same result without using Bootstrap?
body: <p>I found a code in an article on the web, the live demonstration can be seen in the following <a href="http://www.itidabhoi.org/demo/bootstrap-crud-php/" rel="nofollow noreferrer">link</a></p>
  
  <p>Investigating I was able to create a simple modal using a few lines of jquery and CSS, without using bootstrap</p>
  
  <p><strong>Example:</strong> <a href="https://jsfiddle.net/br19232c/1/" rel="nofollow noreferrer">https://jsfiddle.net/br19232c/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
   //----- OPEN
   $('[data-modal-open]').on('click', function(e)  {
    var targeted_modal_class = jQuery(this).attr('data-modal-open');
    $('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);
  
    e.preventDefault();
   });
  
   //----- CLOSE
   $('[data-modal-close]').on('click', function(e)  {
    var targeted_modal_class = jQuery(this).attr('data-modal-close');
    $('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);
  
    e.preventDefault();
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
   max-width:800px;
   width:100%;
   margin:0px auto;
   margin-bottom:60px;
  }
  
  /* Outer */
  .modal {
   width:100%;
   height:100%;
   display:none;
   position:fixed;
   top:0px;
   left:0px;
   right: 0;
   bottom: 0;
   background: rgba(0,0,0,0.2);
    z-index: 99999;
  }
  
  /* Inner */
  .modal-inner {
   width: 500px;
   position: relative;
   margin: 10% auto;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background: #fff;
  }
  
  /* Close Button */
  .modal-close {
   width:30px;
   height:30px;
   padding-top:4px;
   display:inline-block;
   position:absolute;
   top:0px;
   right:0px;
   transition:ease 0.25s all;
   -webkit-transform:translate(50%, -50%);
   transform:translate(50%, -50%);
   border-radius:1000px;
   background:rgba(0,0,0,0.8);
   font-family:Arial, Sans-Serif;
   font-size:20px;
   text-align:center;
   line-height:100%;
   color:#fff;
  }
  
  .modal-close:hover {
   -webkit-transform:translate(50%, -50%) rotate(180deg);
   transform:translate(50%, -50%) rotate(180deg);
   background:rgba(0,0,0,1);
   text-decoration:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a class="btn" data-modal-open="modal-1" href="#"&gt;Open Modal&lt;/a&gt;
  
  &lt;div class="modal" data-modal="modal-1"&gt;
      &lt;div class="modal-inner"&gt;
          &lt;h2&gt;Wow! This is Awesome!&lt;/h2&gt;
          &lt;p&gt;Donec in volutpat nisi. In quam lectus, aliquet rhoncus cursus a, congue et arcu. Vestibulum tincidunt neque id nisi pulvinar aliquam. Nulla luctus luctus ipsum at ultricies. Nullam nec velit dui. Nullam sem eros, pulvinar sed pellentesque ac, feugiat et turpis. Donec gravida ipsum cursus massa malesuada tincidunt. Nullam finibus nunc mauris, quis semper neque ultrices in. Ut ac risus eget eros imperdiet posuere nec eu lectus.&lt;/p&gt;
          &lt;p&gt;&lt;a data-modal-close="modal-1" href="#"&gt;Close&lt;/a&gt;&lt;/p&gt;
          &lt;a class="modal-close" data-modal-close="modal-1" href="#"&gt;x&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the original code of the live demonstration article</p>
  
  <p>I have disabled the bootstrap plugins and of course it was supposed to stop working...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){  
        $('#add').click(function(){  
             $('#insert').val("Insert");  
             $('#insert_form')[0].reset();  
        });  
        $(document).on('click', '.edit_data', function(){  
             var employee_id = $(this).attr("id");  
             $.ajax({  
                  url:"fetch.php",  
                  method:"POST",  
                  data:{employee_id:employee_id},  
                  dataType:"json",  
                  success:function(data){  
                       $('#name').val(data.name);  
                       $('#address').val(data.address);  
                       $('#gender').val(data.gender);  
                       $('#designation').val(data.designation);  
                       $('#age').val(data.age);  
                       $('#employee_id').val(data.id);  
                       $('#insert').val("Update");  
                       $('#add_data_Modal').modal('show');  
                  }  
             });  
        });  
        $('#insert_form').on("submit", function(event){  
             event.preventDefault();  
             if($('#name').val() == "")  
             {  
                  alert("Name is required");  
             }  
             else if($('#address').val() == '')  
             {  
                  alert("Address is required");  
             }  
             else if($('#designation').val() == '')  
             {  
                  alert("Designation is required");  
             }  
             else if($('#age').val() == '')  
             {  
                  alert("Age is required");  
             }  
             else  
             {  
                  $.ajax({  
                       url:"insert.php",  
                       method:"POST",  
                       data:$('#insert_form').serialize(),  
                       beforeSend:function(){  
                            $('#insert').val("Inserting");  
                       },  
                       success:function(data){  
                            $('#insert_form')[0].reset();  
                            $('#add_data_Modal').modal('hide');  
                            $('#employee_table').html(data);  
                       }  
                  });  
             }  
        });  
        $(document).on('click', '.view_data', function(){  
             var employee_id = $(this).attr("id");  
             if(employee_id != '')  
             {  
                  $.ajax({  
                       url:"select.php",  
                       method:"POST",  
                       data:{employee_id:employee_id},  
                       success:function(data){  
                            $('#employee_detail').html(data);  
                            $('#dataModal').modal('show');  
                       }  
                  });  
             }            
        });  
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php  
   $stmt = $con-&gt;prepare("SELECT id,name FROM tbl_employee ORDER BY id DESC");
   $stmt-&gt;execute();
   $stmt-&gt;store_result();
   $stmt-&gt;bind_result($id, $name);
   ?&gt;  
   &lt;!DOCTYPE html&gt;  
   &lt;html&gt;  
        &lt;head&gt;  
             &lt;title&gt;Webslesson Tutorial | PHP Ajax Update MySQL Data Through Bootstrap Modal&lt;/title&gt;  
             &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
             &lt;!--&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;  
             &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;--&gt;
        &lt;/head&gt;  
        &lt;body&gt;  
             &lt;br /&gt;&lt;br /&gt;  
             &lt;div class="container" style="width:700px;"&gt;  
                  &lt;h3 align="center"&gt;PHP Ajax Update MySQL Data Through Bootstrap Modal&lt;/h3&gt;  
                  &lt;br /&gt;  
                  &lt;div class="table-responsive"&gt;  
                       &lt;div align="right"&gt;  
                            &lt;button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning"&gt;Add&lt;/button&gt;  
                       &lt;/div&gt;  
                       &lt;br /&gt;  
                       &lt;div id="employee_table"&gt;  
                            &lt;table class="table table-bordered"&gt;  
                                 &lt;tr&gt;  
                                      &lt;th width="70%"&gt;Employee Name&lt;/th&gt;  
                                      &lt;th width="15%"&gt;Edit&lt;/th&gt;  
                                      &lt;th width="15%"&gt;View&lt;/th&gt;  
                                 &lt;/tr&gt;  
                                 &lt;?php  
                                 while ($stmt-&gt;fetch()) {
                                 ?&gt;  
                                 &lt;tr&gt;  
                                      &lt;td&gt;&lt;?php echo $name; ?&gt;&lt;/td&gt;  
                                      &lt;td&gt;&lt;input type="button" name="edit" value="Edit" id="&lt;?php echo $id; ?&gt;" class="btn btn-info btn-xs edit_data" /&gt;&lt;/td&gt;  
                                      &lt;td&gt;&lt;input type="button" name="view" value="view" id="&lt;?php echo $id; ?&gt;" class="btn btn-info btn-xs view_data" /&gt;&lt;/td&gt;  
                                 &lt;/tr&gt;  
                                 &lt;?php  
                                 }  
                                 ?&gt;  
                            &lt;/table&gt;  
                       &lt;/div&gt;  
                  &lt;/div&gt;  
             &lt;/div&gt;  
        &lt;/body&gt;  
   &lt;/html&gt;  
   &lt;div id="dataModal" class="modal fade"&gt;  
        &lt;div class="modal-dialog"&gt;  
             &lt;div class="modal-content"&gt;  
                  &lt;div class="modal-header"&gt;  
                       &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;  
                       &lt;h4 class="modal-title"&gt;Employee Details&lt;/h4&gt;  
                  &lt;/div&gt;  
                  &lt;div class="modal-body" id="employee_detail"&gt;  
                  &lt;/div&gt;  
                  &lt;div class="modal-footer"&gt;  
                       &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;  
                  &lt;/div&gt;  
             &lt;/div&gt;  
        &lt;/div&gt;  
   &lt;/div&gt;  
   &lt;div id="add_data_Modal" class="modal fade"&gt;  
        &lt;div class="modal-dialog"&gt;  
             &lt;div class="modal-content"&gt;  
                  &lt;div class="modal-header"&gt;  
                       &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;  
                       &lt;h4 class="modal-title"&gt;PHP Ajax Update MySQL Data Through Bootstrap Modal&lt;/h4&gt;  
                  &lt;/div&gt;  
                  &lt;div class="modal-body"&gt;  
                       &lt;form method="post" id="insert_form"&gt;  
                            &lt;label&gt;Enter Employee Name&lt;/label&gt;  
                            &lt;input type="text" name="name" id="name" class="form-control" /&gt;  
                            &lt;br /&gt;  
                            &lt;label&gt;Enter Employee Address&lt;/label&gt;  
                            &lt;textarea name="address" id="address" class="form-control"&gt;&lt;/textarea&gt;  
                            &lt;br /&gt;  
                            &lt;label&gt;Select Gender&lt;/label&gt;  
                            &lt;select name="gender" id="gender" class="form-control"&gt;  
                                 &lt;option value="Male"&gt;Male&lt;/option&gt;  
                                 &lt;option value="Female"&gt;Female&lt;/option&gt;  
                            &lt;/select&gt;  
                            &lt;br /&gt;  
                            &lt;label&gt;Enter Designation&lt;/label&gt;  
                            &lt;input type="text" name="designation" id="designation" class="form-control" /&gt;  
                            &lt;br /&gt;  
                            &lt;label&gt;Enter Age&lt;/label&gt;  
                            &lt;input type="text" name="age" id="age" class="form-control" /&gt;  
                            &lt;br /&gt;  
                            &lt;input type="hidden" name="employee_id" id="employee_id" /&gt;  
                            &lt;input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" /&gt;  
                       &lt;/form&gt;  
                  &lt;/div&gt;  
                  &lt;div class="modal-footer"&gt;  
                       &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;  
                  &lt;/div&gt;  
             &lt;/div&gt;  
        &lt;/div&gt;  
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You could use my modal which is a simple example</p>
  
  <p>Despite having created a simple modal, it can be said that I have a high knowledge of jQuery development, but sadly it is not, I do not know for sure the use of ajax and I do not know how to use of libraries Bootstrap . what makes it difficult for me to be able to guide myself in its javascript code to adapt what I have created.</p>
  
  <p>So how can I make it work the same, without using Bootstrap, (not so much the design, but if its structure is to say when clicking on edit that the data is displayed in the dialog box etc...)</p>
  
  <p><strong>Example:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ivGve.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ivGve.jpg" alt="enter image description here"></a></p>