<div class="panel panel-default">
<div id="view_query">
<div class="panel-heading">
<h3 class="panel-title">Reply Query</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover table-bordered" id="example-1">
<thead>
<th>Name</th>
<th>Title</th>
<th class="no-sorting">Description</th>
<th class="no-sorting">Photo</th>
<th class="no-sorting">Date</th>
<th class="no-sorting">Actions</th>
</thead>
<tbody>
<?php for($i=1;$i<=12;$i++){?>
<tr>
<td>'NAME'</td>
<td>'Title'</td>
<td>'Description'</td>
<td>
<img src="" height="80px" width="100px">
</td>
<td>'dd/mm/yyyy'</td>
<td class="action">
<input type="submit" value=" Reply" href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" style="background-color: #313437;border:1px solid #313437" class="btn btn-primary btn-single btn-sm fa-input">
<input type="text" hidden="" value="<?php echo $i;?>" name="id">
</input>
</td>
<?php }?>
</tr>
<!-- <form method="post" action="">
<button name="submit" id="btn_reply" class="btn btn-dark btn_add_record form-control text-left fa-input" value=" Reply" style="color:#fff" type="submit"></button>
<input type="text" hidden="" value="<?php echo $i;?>" name="id">
</form> -->
<!-- <a href="index.php?p=query&id= <?php echo $i;?>" id="btn_reply" class="btn btn-primary btn_add_record "><i class="fa fa-reply"></i> Reply</a> -->
</tbody>
</table>
</div>
</div>
</div>
</div>
这是我的视图数据代码。当用户点击回复按钮时,我想显示modal.it显示它但是点击了哪个按钮我怎么知道? 我想通过id识别它,所以请帮助我如何通过它。
<div class="modal fade validate" id="modal-6">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Reply Query</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Title</label>
<input class="form-control" disabled="" name="question" data-validate="required" data-message-required="Please Enter Title" placeholder="Enter Title" type="text">
</div>
<div class="form-group col-md-6">
<label class="control-label">URL</label>
<input class="form-control" name="url" disabled="" data-validate="required" data-message-required="Please Enter URL" placeholder="Enter URL" type="text">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group no-margin">
<label for="description" class="control-label">Description</label>
<textarea class="form-control autogrow" id="description" placeholder="Describe Description Regarding Query"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">Image Upload</label>
<div>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput"> <img src="http://placehold.it/200x150" alt="..."> </div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px"></div>
<div> <span class="btn btn-white btn-file"> <span class="fileinput-new">Select image</span> <span class="fileinput-exists">Change</span>
<input type="file" name="..." accept="image/*"> </span> <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">Remove</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info">Send</button>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这是模态的代码。
答案 0 :(得分:1)
建议使用更简单,更简单的方法,bootstrap
框架将处理剩下的工作。
替换以下
<td class="action">
<input type="submit" value=" Reply" href="javascript:;" onclick="jQuery('#modal-6').modal('show', {backdrop: 'static'});" style="background-color: #313437;border:1px solid #313437" class="btn btn-primary btn-single btn-sm fa-input">
<input type="text" hidden="" value="<?php echo $i;?>" name="id"></input>
</td>
使用
<td class="action">
<button type="button" data-toggle="modal" data-target="#modal-6" data-id="This Is Id" class="btn btn-primary btn-single btn-sm fa-input">Reply</button>
</td>
使用data-toggle
和data-target
属性打开模态,并使用其他data-id
属性和show.bs.modal
或shown.bs.modal
模态事件,可以将值传递给模态
$(document).ready(function() {
$('#modal-6').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
alert(id);
});
});
保持backdrop: 'static'
将其添加到模态HTML标记
<div class="modal fade validate" id="modal-6" data-backdrop="static" data-keyboard="false">
<!--- Rest of the modal code ---->
</div>
答案 1 :(得分:0)
我被@Shehary所鼓舞,但不得不用尽量不同的语法来使用它。
$(document).ready(function() {
$('#modal-6').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget.id).selector;
alert(id);
});
});