本文介绍了如何从引导程序重用模态 html?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些包含不同内容的不同模式对话框.基本上，单击 button1 显示 modaldialog1...单击 button2 显示 modaldialog2 等.
如何在 JavaScript 或其他一些可重复使用的容器中重复使用该 html 代码并将数据传递给一个可重复使用的模态?
button1点击的基本代码和modalDialog1的支持代码:
按钮代码(用于点击显示模式)
<a href="#myModal" role="button" class="btn" data-toggle="modal">启动演示模式</a>
用于显示模态的 HTML...如何在 JavaScript 函数或其他方式中重用此代码，并为 Modal Header 和 classIDThatContainstheContentsforModal 传递一些变量，以便模态可以重用?
不确定这是否可以用于 JavaScript 或其他一些方法.
<div id="myModal" class="modal hidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">模态标题</h3>
<div class="modal-body"><div id="container" class="classIDThatContainstheContentsforModal">
<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>
解决方案
试试这个
<a class="btn" onclick="ShowModal('My Header 1','My_Class_ID_1')">启动演示模式1</a><a class="btn" onclick="ShowModal('My Header 2','My_Class_ID_2')">启动演示模式 2</a><div id="myModal" class="modal hidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"咏叹调隐藏=真"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</按钮><h3 id="myModalLabel">模态标题
<div class="modal-body"><div id="container" class="classIDThatContainstheContentsforModal">
<div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭<button class="btn btn-primary">保存更改
<script type="text/javascript">函数 ShowModal(header, contentClassID) {$('#myModalLabel').html(header);$('#container').removeAttr('class');//如果已经存在则删除$('#container').addClass(contentClassID);$('#myModal').modal('show');}
I have a handful of different modal dialogs that contain different content. Basically, click button1 displays modaldialog1...click button2 displays modaldialog2, etc, etc.
How can I reuse that html code within JavaScript or some other reusable container and pass in data to one reusable modal?
Essential Code for button1 click and supporting code for modalDialog1:
Button Code (for click to display modal)
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
HTML for displaying the modal...How can I reuse this code say within a JavaScript function or some other way and pass in some variables for Modal Header and classIDThatContainstheContentsforModal so that the modal can be reusable?
Not sure if this could go into a JavaScript or some other methodology.
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal Header</h3>
</div>
<div class="modal-body">
<div id="container" class="classIDThatContainstheContentsforModal">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
解决方案
try this
<a class="btn" onclick="ShowModal('My Header 1','My_Class_ID_1')">Launch demo modal 1</a>
<a class="btn" onclick="ShowModal('My Header 2','My_Class_ID_2')">Launch demo modal 2</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Modal Header</h3>
</div>
<div class="modal-body">
<div id="container" class="classIDThatContainstheContentsforModal">
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
<script type="text/javascript">
function ShowModal(header, contentClassID) {
$('#myModalLabel').html(header);
$('#container').removeAttr('class'); //if alredy exists remove it
$('#container').addClass(contentClassID);
$('#myModal').modal('show');
}
</script>
这篇关于如何从引导程序重用模态 html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
07-17 02:30
