将参数发送到Bootstrap模态窗口? [英] Send parameter to Bootstrap modal window?
问题描述
我有一个问题,我无法将任何参数传递给模式窗口(使用Bootstrap 3),我尝试使用此链接中指出的解决方案,但无法使其工作:
将信息动态加载到Twitter Bootstrap模式 (按键kexxcream用户)。
但按下按钮,显示屏不显示任何东西,显然是块,附上下面的图片:
http:// i .imgur.com / uzRUyf1.png
我附上了代码(左上方的代码相同);
HTML代码:
< div id =myModalclass =modal hide fade>
< div class =modal-header>
< button class =closedata-dismiss =modal>& times;< / button>
< h3>标题< / h3>
< / div>
< div class =modal-body>
< div id =modalContentstyle =display:none;>
< / div>
< / div>
< div class =modal-footer>
< a href =#class =btn btn-infodata-dismiss =modal>关闭< / a>
< / div>
< / div>
JS代码:
点击(功能()
{
var essay_id = $(this).attr('id'); $($ [code> $(a [data-toggle = modal]) b
$ b $ .ajax({
cache:false,
type:'POST',
url:'backend.php',
data:'EID ='+ essay_id,
成功:函数(数据)
{
$('#myModal')。show();
$('#modalContent')。show ).html(data);
}
});
});
按钮:
< a href ='#myModal'data-toggle ='modal'id ='2'>编辑< / a>
PHP代码(backend.php):
<?php
$ editId = $ _POST ['EID'];
?>
< div class =jumbotron>
< div class =container>
< h1>选择的ID是<?php echo $ editId?>< / h1>
< / div>
< / div>
首先,您应该修复模式HTML 结构。现在这是不正确的,你不需要class .hide
:
< div id =edit-modalclass =modal fadetabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button>
< h4 class =modal-titleid =myModalLabel>模式标题< / h4>
< / div>
< div class =modal-body edit-content>
...
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< button type =buttonclass =btn btn-primary>保存更改< / button>
< / div>
< / div>
< / div>
< / div>
然后链接应该通过 最后,Js部分变得非常简单: data-target $ c指向这个模式$ c $>
$ $ p $ < a href =#myModaldata-toggle =modalid =1 data-target =#edit-modal>编辑1< / a>
<$ ('show.bs.modal',function(e){
var $ modal = $(this pre'$'code> $('#edit-modal')。 ),
esseyId = e.relatedTarget.id;
$ .ajax({
cache:false,
type:'POST',
url :'backend.php',
data:'EID ='+ essayId,
成功:函数(数据){
$ modal.find('。edit-content')。html数据);
}
});
})
演示: http://plnkr.co/edit/4XnLTZ557qMegqRmWVwU?p=preview
I have a problem, I cannot pass any parameters to a modal window (using Bootstrap 3), I tried using the solution stated in this link, but I cannot make it work:
Dynamically load information to Twitter Bootstrap modal
(Solution kexxcream user).
But pressing the button, the display does not show me anything, apparently blocks, attached a picture below:
http://i.imgur.com/uzRUyf1.png
I have attached the code (same code post above left);
HTML Code:
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
<div id="modalContent" style="display:none;">
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
</div>
</div>
JS Code:
$("a[data-toggle=modal]").click(function()
{
var essay_id = $(this).attr('id');
$.ajax({
cache: false,
type: 'POST',
url: 'backend.php',
data: 'EID='+essay_id,
success: function(data)
{
$('#myModal').show();
$('#modalContent').show().html(data);
}
});
});
Button:
<a href='#myModal' data-toggle='modal' id='2'> Edit </a>
PHP Code (backend.php):
<?php
$editId = $_POST['EID'];
?>
<div class="jumbotron">
<div class="container">
<h1>The ID Selected is <?php echo $editId ?></h1>
</div>
</div>
First of all you should fix modal HTML structure. Now it's not correct, you don't need class .hide
:
<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body edit-content">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Then links should point to this modal via data-target
attribute:
<a href="#myModal" data-toggle="modal" id="1" data-target="#edit-modal">Edit 1</a>
Finally Js part becomes very simple:
$('#edit-modal').on('show.bs.modal', function(e) {
var $modal = $(this),
esseyId = e.relatedTarget.id;
$.ajax({
cache: false,
type: 'POST',
url: 'backend.php',
data: 'EID=' + essayId,
success: function(data) {
$modal.find('.edit-content').html(data);
}
});
})
Demo: http://plnkr.co/edit/4XnLTZ557qMegqRmWVwU?p=preview
这篇关于将参数发送到Bootstrap模态窗口?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!