输出

Question

我在网络上的文章中找到了一个代码，现场演示可以在以下link

中看到

调查我能够使用几行jquery和CSS创建一个简单的模态，而不使用bootstrap

示例： https://jsfiddle.net/br19232c/1/

$(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();
	});
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn" data-modal-open="modal-1" href="#">Open Modal</a>

<div class="modal" data-modal="modal-1">
    <div class="modal-inner">
        <h2>Wow! This is Awesome!</h2>
        <p>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.</p>
        <p><a data-modal-close="modal-1" href="#">Close</a></p>
        <a class="modal-close" data-modal-close="modal-1" href="#">x</a>
    </div>
</div>

在现场演示文章的原始代码中

我已经禁用了bootstrap插件，当然它应该停止工作......

$(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');  
                     }  
                });  
           }            
      });  
 });

<?php  
 $stmt = $con->prepare("SELECT id,name FROM tbl_employee ORDER BY id DESC");
 $stmt->execute();
 $stmt->store_result();
 $stmt->bind_result($id, $name);
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | PHP Ajax Update MySQL Data Through Bootstrap Modal</title>  
           <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
           <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">PHP Ajax Update MySQL Data Through Bootstrap Modal</h3>  
                <br />  
                <div class="table-responsive">  
                     <div align="right">  
                          <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>  
                     </div>  
                     <br />  
                     <div id="employee_table">  
                          <table class="table table-bordered">  
                               <tr>  
                                    <th width="70%">Employee Name</th>  
                                    <th width="15%">Edit</th>  
                                    <th width="15%">View</th>  
                               </tr>  
                               <?php  
                               while ($stmt->fetch()) {
                               ?>  
                               <tr>  
                                    <td><?php echo $name; ?></td>  
                                    <td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>  
                                    <td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>  
                               </tr>  
                               <?php  
                               }  
                               ?>  
                          </table>  
                     </div>  
                </div>  
           </div>  
      </body>  
 </html>  
 <div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
 <div id="add_data_Modal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>  
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age" id="age" class="form-control" />  
                          <br />  
                          <input type="hidden" name="employee_id" id="employee_id" />  
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

你可以使用我的模态，这是一个简单的例子

尽管已经创建了一个简单的模态，但可以说我对jQuery开发有很高的了解，但遗憾的是它不是，我不确定使用ajax并且我不知道如何使用库Bootstrap。是什么让我难以能够引导自己的javascript代码来适应我的创造。

那么如何在不使用Bootstrap的情况下使其工作原理相同（不是设计，而是如果其结构是在点击编辑时说明数据显示在对话框中等等）< / p>

示例：

Answer 1

请检查代码可能对您有用

＆＃13;

select max(rowNo) from Prop_detail

＆＃13;

sizeMax

＆＃13;

Answer 2

在要隐藏的html <div中，通过添加属性data-modal="add_data_modal"显示给它模态名称，add_data_modal是模态名称，用于检测添加和关闭事件。在这个div中还添加了类modal，并在其内部div中添加了类modal-inner，以便其css（隐藏和显示）有效。

添加按钮添加属性data-modal-open="add_data_modal"，

在关闭按钮添加属性data-modal-close="add_data_modal"

注意：在div中的所有进程模式名称中，添加按钮和关闭按钮必须相同。

＆＃13;

$(function() {
  //----- OPEN
  $('[data-modal-open]').on('click', function(e)  {
    $('#insert_form')[0].reset();
    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();
  });
});
  $(document).ready(function(){  
      $('#add').click(function(){  

                     $('#employee_id').val("");
                     $('#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"})  
                .done(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");  
                     $('[data-modal="add_data_modal"]').fadeIn(350);

      
                }).fail(function() {
    				alert( "Ajax Request fail" );
  				})

            
      });  
      $('#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");  
                     }
                     })  
                     .done(function(data){  
                         
                          $('#insert_form')[0].reset();  
                              $('[data-modal="add_data_modal"]').fadeOut(350);

                          $('#employee_table').html(data);      
                     })  
                     .fail(function() {
   						 alert( "Insert ajax request fail" );
  								}) 
                  
                  
           }
      });  
      $(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}})  
                     .done(function(data){
                            $('[data-modal="empdetail"]').fadeIn(350);
                            $('#employee_detail').html(data);  
      
                     }) .fail(function() {
   						 alert( "Select ajax request fail" );
  								}) 
                     
           }            
      });  
 });

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:700px;">  
                <h3 align="center">PHP Ajax Update MySQL Data Through Bootstrap Modal</h3>  
                <br />  
                <div class="table-responsive">  
                     <div align="right">  
                          <button type="button" name="add" id="add" data-toggle="modal" data-modal-open="add_data_modal" class="btn btn-warning">Add</button>  
                     </div>  
                     <br />  
                     <div id="employee_table">  
                          <table class="table table-bordered">  
                               <tr>  
                                    <th width="70%">Employee Name</th>  
                                    <th width="15%">Edit</th>  
                                    <th width="15%">View</th>  
                               </tr>  
                                <?php  
                               while ($stmt->fetch()) {
                               ?>  
                               <tr>  
                                    <td><?php echo $name; ?></td>  
                                    <td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>  
                                    <td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>  
                               </tr>  
                               <?php  
                               }  
                               ?>    
                          </table>  
                     </div>  
                </div>  
           </div>  
      </body>  
 </html>  
  
<div id="dataModal" class="modal" data-modal="empdetail">  
      <div class="modal-inner">  
           <div class="modal-content">  
                <div class="modal-header">  
                      <a class="modal-close" data-modal-close="empdetail" href="#">x</a>
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-modal-close="empdetail">Close</button> 

                </div>  
           </div>  
      </div>  
 </div>  
 <div id="add_data_Modal" class="modal"  data-modal="add_data_modal">  
      <div class="modal-inner">  
           <div class="modal-content">  
                <div class="modal-header">  
                      <a class="modal-close" data-modal-close="add_data_modal" href="#">x</a>

                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>  
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age" id="age" class="form-control" />  
                          <br />  
                          <input type="hidden" name="employee_id" id="employee_id" />  
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-modal-close="add_data_modal" href="#">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

＆＃13;

输出

添加数据

使用ajax请求查看详细信息

使用ajax请求编辑数据

与PHP完美配合，ajax也适用于此

Answer 3

如果您只开发模式框，则不需要使用jquery或bootstrap。两者都会导致下载不必要的js库代码并尝试额外的http往返（它会降低您的网站在移动设备中的性能）。

只使用css和javascript开发自己的模型框非常简单，查看指定链接以查看更多内容How create Modal-box

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}
</style>
</head>
<body>

<h2>Bottom Modal</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

＆＃13;

Answer 4

使用javascript更新上面的代码以打开弹出窗口。

＆＃13;

function ModalOpen(namee) {
 	window.location.href=namee
}

＆＃13;

.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}

.modal-dialog{
      width: 600px;
    margin: 30px auto;
}

.modal-content{
  
  position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: beige;
  margin: 80px 0;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: red;
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid blue;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: blue;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}



.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

＆＃13;

<button onclick="ModalOpen('#popup1')">Check this</button>
<div id="popup1" class="overlay" >  
<div class="popup">
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                    
                     
                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>  
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age" id="age" class="form-control" />  
                          <br />  
                          <input type="hidden" name="employee_id" id="employee_id" />  
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                    
                     <a class="close btn btn-default" href="#">x</a>
                </div>  
           </div>  
      </div> 
      </div>
 </div>

＆＃13;

如何在不使用Bootstrap的情况下获得相同的结果？

4 个答案:

输出