【发布时间】：2018-06-07 19:01:27
【问题描述】：
我在网上的一篇文章中找到了一段代码，现场演示可以看下面link
调查我能够使用几行 jquery 和 CSS 创建一个简单的模式，而无需使用引导程序
示例： 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>在现场演示文章的原始代码中
我已经禁用了引导插件，当然它应该停止工作......
$(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">×</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">×</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>你可以使用我的模态，这是一个简单的例子
尽管创建了一个简单的modal，可以说我对jQuery开发有很高的了解，但可惜不是，我不确定ajax的使用，我不知道如何使用库引导程序。是什么让我难以在其 javascript 代码中引导自己来适应我创建的内容。
那么如何在不使用 Bootstrap 的情况下使其工作相同，（与其说是设计，但如果它的结构是说单击编辑时数据显示在对话框中等...）
示例：
【问题讨论】：
-
您的问题非常广泛。您想在不使用引导程序的情况下创建模态，那么您可以谷歌搜索其他 jquery 模态插件。还是您想在点击编辑后获取模态中的数据。
-
@AtalShrivastava 我不想创建模态，如您所见，我已经创建了模态，其想法是避免在可以自行开发工作时使用插件。
-
数据与引导无关。 bootstrap 是一个前端框架，有助于构建可扩展的应用程序或网站。您可以为数据编写自己的代码。
-
评论 bootstrap js 和 css 将停止显示模式。因此，如果您的模态框不在视图中，您的数据如何显示在模态框中。
-
@AtalShrivastava 如果我创建了一个简单的模式，但我不能在这个编程中使用它，因为它必须使该代码适应 ajax 代码，正如您在原始代码中看到的那样，数据不仅可以工作对于一个简单的模态但也来自 ajax，打开一个窗口很容易，正如您在我的示例中看到的那样，我创建的问题是如何使其适应 ajax 以显示这些结果