动态创建的bootstrap3模式不起作用 [英] dynamically created bootstrap3 modals do not work
问题描述
我有一个包含动态生成项目列表的页面。
每个项目都有按钮切换模式窗口更多的信息，但模态不会出现。
模块放在正文开始标签后面：
< div class =modal fadeid = auto9tabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮>
< h4 class =modal-titleid =myModalLabel> Something< / h4>
< / div>
< div class =modal-body>
...
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>Закрыть< / button>
< / div>
< / div>
< / div>
< / div>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮>
< h4 class =modal-titleid =myModalLabel> Something< / h4>
< / div>
< div class =modal-body>
...
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>Закрыть< / button>
< / div>
< / div>
< / div>
< / div>
这些按钮包括：
< button class =btn btn-defaultdata-toggle =modaldata-target =＃auto9type =button>详细资料< / button>< / p>
< button class =btn btn-defaultdata-toggle =modaldata-target =＃auto16type =button>详情请参阅< / button>< / p>
如果我只在html体内放置了按钮和模态，一切正常。有什么不对？
这里是一步一步执行我的项目之一，希望对大家有所帮助。
1 - 假设您的List，其中包含按钮（MVC Razor视图示例）。
@foreach（ListCollection中的var列表）
{
< button type =buttonclass =btn btn-xs btn-primarydata-toggle =modaldata-target =＃exampleModaldata-id =@list.ID>详情< / button>
}
2在这里，我已经把data-id放到每个按钮上，为列表中的这个按钮打开一个模式。
<3> - 每个按钮都会使用脚本（下面的脚本）打开更多信息的模式。
< div class =modal fadeid =exampleModaltabindex = - 1role =dialogaria-labelledby =exampleModalLabel>
< div class =modal -dialogrole =document>
< div class =modal-content>
< div class =modal-header>
<按钮类型=buttonclass =closedata-dismiss =modalaria-label =关闭>< span aria-hidden =true>& times;< / span>< / button> ;
< / div>
< div class =modal-body>
//通过Ajax调用或者任何你喜欢的东西把这个项目的更多细节放到这里
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< / div>
< / div>
< / div>
< / div>
4 - 现在脚本部分
<$ p $（$'code> $（document）.ready（function（）{
$（'＃exampleModal'）。on（'show.bs.modal'，function（event）{
var button = $（event.relatedTarget）; //单击的按钮
var clickedButtonId = button.data（'Id'）; //获取按钮的ID
var modal = $（this）;
modal.find（'。modal-body'）。text（clickedButtonId）;
//我在模态体div类中放置的单击按钮的ID或将信息放在这里使用ajax调用按钮的按钮
// Ajax调用以获取列表中单击按钮的更多详细信息
$ .ajax（{
url：URL，
类型：POST，
数据：JSON.stringify（{id：clickedButtonId}），
dataType：'JSON'，
contentType：application / json，
success：function（respon （使用ajax
）
，
错误：函数（在这里输入更多信息）{
modal.find（'。modal-body'）。text ）{
}
}）;
}）
}）;
I have a page with dynamically generated list of items. Every item has button toggling modal window with more info but modal do not appear. The modals are placed right after body opening tag:
<div class="modal fade" id="auto9" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Something</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="auto16" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Something</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
The buttons are:
<button class="btn btn-default" data-toggle="modal" data-target="#auto9" type="button">Подробнее</button></p>
<button class="btn btn-default" data-toggle="modal" data-target="#auto16" type="button">Подробнее</button></p>
If i place only button and modal within html body everything works fine. What is wrong?
Here is step by step Implementation in one of my project, hope it will help.
1-Suppose its your List, which have button in it(MVC Razor view example).
@foreach (var list in ListCollection)
{
<button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@list.ID> Details </button>
}
2-Here I have put data-id to each button to open a modal for this button in the list.
3-Each button will open the modal with more info using script(script below).
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Title Here</h4>
</div>
<div class="modal-body">
//Put here more details of the item, by Ajax call or any thing you like
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
4-Now the script part
$(document).ready(function () {
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);//Button which is clicked
var clickedButtonId= button.data('Id');//Get id of the button
var modal = $(this);
modal.find('.modal-body').text(clickedButtonId);
//Id of the clicked button which i have put inside the modal-body div class or put info here using ajax call for the button that button.
//Ajax call to get the more details of clicked button in the list.
$.ajax({
url: "URL",
type: "POST",
data: JSON.stringify({ id: clickedButtonId}),
dataType: 'JSON',
contentType: "application/json",
success: function (response) {
modal.find('.modal-body').text(response);//Put here more info using ajax
}
,
error: function () {
}
});
})
});
这篇关于动态创建的bootstrap3模式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
