html - 如何在不更改属性的情况下区分 id 或 class

标签 html css twitter-bootstrap

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

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

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

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

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

          <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>

最佳答案

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

我尝试将 id 更改为数字“2”,但效果很好。只需复制所有代码并通过附加升序数字来更改 ID。

关于html - 如何在不更改属性的情况下区分 id 或 class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8639205/

相关文章:

javascript - 如何链接到javascript中的同一页面 anchor

html - 向html标签添加属性?

php - 根据选择器特异性排序 CSS

jquery - 体宽可以改写吗?

javascript - 如何在悬停和聚焦时打开 Bootstrap 导航菜单

html - 强制 Bootstrap 3 表格标题为固定宽度

html - 当视频开始播放到 Wordpress 页面时,在 html(或 css)中添加背光效果

javascript - 单击时未打开图像选择窗口?

javascript - 我如何在我的 Js 查询中定义 $

jquery - Bootstrap Accordion 错误 : collapse switch back to visible mode