【问题标题】:How to differentiate id or class without changing properties如何在不更改属性的情况下区分 id 或 class
【发布时间】:2012-01-28 04:19:13
【问题描述】:

我正在制作一个使用来自 Twitter bootstrap 的 bootstrap-modal.js 的网页

bootstrap-modal.js 允许您创建“模态”。您基本上单击一个按钮,然后一个小的 javascript 窗口向下滑动,您可以在其中显示不同的内容等。这是一个演示 http://jsfiddle.net/mjmitche/xt4aQ/44/

我的网页上将有几个按钮/模态,因此我必须对其进行设置,以便每个按钮触发不同的模态。我认为最好的方法是给他们不同的类或 ID

问题,如果我更改 bootstrap-modal.js 给出的 id,它会更改模态的属性...例如,它可能会删除或添加黑屏背景等。上面链接的小提琴显示了下面的代码是如何工作的。

问题:你知道我如何区分模态,以便每个按钮触发不同的模态,但让它们都具有相同的属性吗?

          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Modal Heading</h3>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
              <a href="#" class="btn primary">Primary</a>
              <a href="#" class="btn secondary">Secondary</a>
            </div>
          </div>

按钮

<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn important">Launch left Modal</button>

【问题讨论】:

    标签: html css twitter-bootstrap


    【解决方案1】:

    你说你不能使用 id,那为什么不用类呢?尝试为每个模态添加不同的类。这是您更新的小提琴:http://jsfiddle.net/xt4aQ/52/

    我尝试将 id 更改为数字“2”,它工作得很好。只需复制所有代码并通过附加一个升序来更改 id。

    【讨论】:

    • 好吧,也许我没有正确理解这一点。在 OP 的代码中,您会看到它具有
    • 模态框和按钮之间没有类链接。该链接与 id 存在。因此,只需更改模态和按钮中的 id 名称即可创建另一个具有自己按钮的模态。这些类严格用于样式目的。如果您想添加更多样式,可以添加其他类。
    • 但是如果你改变模态框里的“id”的名字,它会改变模态框的属性。例如,我将一个模态 id 更改为“modalmodal”(从“modal-from-dom”),现在当我单击它时,它会在整个页面上生成一个黑色灯箱类型的屏幕等。
    • 是的,在你的小提琴上,两个模态都有黑色背景,但是当我把它放在我的网站(本地主机)上时,只有一个模态有黑色背景。更改 id 会影响属性
    • 不......你一定是做错了什么。 id 是您区分不同模式的方式......如果它正在现场工作但不在您的本地机器上,那么有些东西连接不正确。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签