将参数发送到Bootstrap模式窗口？
将参数发送到Bootstrap模式窗口？
提问于 2014-06-20 17:19:02
我有一个问题，我无法将任何参数传递到模式窗口(使用Bootstrap 3)，我尝试使用此链接中所述的解决方案，但我无法使其工作：
Dynamically load information to Twitter Bootstrap modal
(解决方案kexxcream用户)。
但是按下按钮，显示屏没有显示任何东西，显然是阻塞的，附了一张下面的图片：
http://i.imgur.com/uzRUyf1.png
我已经附加了代码(相同的代码左上角)；
HTML代码：
<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代码：
$("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);
}
});
});按钮：
<a href='#myModal' data-toggle='modal' id='2'> Edit </a>PHP代码(backend.php)：
<?php
$editId = $_POST['EID'];
?>
<div class="jumbotron">
<div class="container">
<h1>The ID Selected is <?php echo $editId ?></h1>
</div>
</div>回答 4
Stack Overflow用户
回答已采纳
发布于 2014-06-20 17:40:02
首先，你应该修复模态超文本标记语言structure。现在这是不正确的，你不需要.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>然后，链接应该通过data-target属性指向此模式：
<a href="#myModal" data-toggle="modal" id="1" data-target="#edit-modal">Edit 1</a>最后，Js部分变得非常简单：
$('#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);
}
});
})Stack Overflow用户
发布于 2015-01-16 00:49:01
有一个比公认的答案更好的解决方案，特别是使用data-*属性。如果页面上的任何其他元素都有id=1，将id设置为1将导致问题。相反，您可以这样做：
<button class="btn btn-primary" data-toggle="modal" data-target="#yourModalID" data-yourparameter="whateverYouWant">Load</button>
<script>
$('#yourModalID').on('show.bs.modal', function(e) {
var yourparameter = e.relatedTarget.dataset.yourparameter;
// Do some stuff w/ it.
});
</script>Stack Overflow用户
发布于 2015-10-27 11:47:46
我在Passing data to a bootstrap modal上找到了解决方案
因此，只需使用：
$(e.relatedTarget).data('book-id'); with 'book-id‘是具有前缀'data-’的modal的属性
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24323895
复制相关文章
相似问题
腾讯云开发者
