将页面片段加载到Twitter引导模式中
Load a page fragment into a Twitter bootstrap Modal
是否可以使用Twitter引导程序的模态组件加载页面片段?我想把一个页面加载到模态中,但我只想要它的一部分。例如,我希望页面上的表单没有换行导航。在使用jquery工具覆盖和jquery的.load函数之前,我已经做过这种类型的事情。但是模态的东西不允许传递这种类型的信息
以下是我正在使用的一些示例文本:
<a tabindex="-1"
href="metadata.html"
id="metadata-link"
data-target="#modal"
data-toggle="modal">Metadata</a>
<div id="modal" class="modal hide fade in" style="display:none;">
<div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
<div class="modal-body"></div>
<div class="model-footer">footer</div>
</div>
<script>
$(document).ready(function() {
$('#metadata-link').modal({show:false});
});
</script>
"metadata.html"页面是一个完整的html文档。此页面的内容按预期加载到".modal body"元素中。但是什么都没有显示。。。
如果将"metadata.html"页面切换为仅包含"div"内容的页面,则会显示模态。
有人知道为什么会发生这种事吗?
您可以手动完成:
<script>
$(document).ready(function() {
$('#metadata-link').click(function(){
$.ajax(
{
url:'url-to-load-page',
success: function(response){
//do what ever you want here to extract the part you want
$('#modal-div-content').html(adapted-response);
$('#modal').modal('show');
}
});
});
});
</script>
bootstrap使用jquery加载方法,该方法允许指定URL和片段选择器:
与$.get()不同,.load()方法允许我们指定要插入的远程文档。这是通过一个特殊的url参数的语法。如果一个或多个空格字符包含在字符串中,字符串中第一个之后的部分假设space是一个jQuery选择器,用于确定内容要加载。
所以在我的情况下(添加一个音乐家),我可以使用一个像这样的普通链接标签:
<a href="/musicians/new?editMode .container form" class="btn pull-right newItem" data-toggle="modal" data-target="#newItemModal" ><i class="icon-plus-sign"></i> Add</a>
它从容器div中提取表单元素,并将其显示在newItemModal模态中。这种方法允许我对其他项目重复使用模态
使用数据远程声明片段id对我有效:
<a href="remote.html" data-remote="remote.html #fragment" data-toggle="modal" data-target="#modal">
相关文章:
- 将页面片段加载到Twitter引导模式中
- Twitter Boostrap:模式窗口在重新播放模式窗口后不播放视频
- Twitter引导模式通过Ajax更改内容
- twitter引导模式——如何将数据传递给回调函数
- Twitter引导模式渐变
- Twitter引导模式-从iframe中获取信息并填充在主页上
- 在twitter引导模式上分享这个
- Twitter引导模式背景不会消失
- Twitter引导模式的黄瓜功能
- Twitter Bootstrap:如何关闭模式对话框
- Twitter 引导模式出现在错误的位置,未居中且按钮不可单击
- 在 Twitter 引导模式中输入按键时触发 onClick 事件
- Twitter引导模式:如何删除向下滑动效果
- 在 Twitter 引导中禁用视频自动播放,并在模式关闭时停止视频
- Twitter引导模式-灰色背景,但没有窗口
- 无法在可见时更改Twitter引导模式的选项
- Twitter引导程序模式URL参数
- Rails 3.1和Twitter引导模式don'Don’我打得不好
- bootstrap模式中的Twitter共享按钮在firefox上不起作用
- 如何清理(销毁)Twitter Bootstrap 3.2模式表单内容