如何从引导程序重用模态 html? [英] How to reuse modal html from bootstrap?

查看：25
本文介绍了如何从引导程序重用模态 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆