相关疑难解决方法(0)

我希望能够通过Bootstrap的模态插件在页面上使用多个不同的链接重用一个模态div:

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br />
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br />

<!-- Modal -->
<div id="utility" 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">&times;</button>
    <h3 id="myModalLabel">Click outside modal to close it</h3>
  </div>
  <div class="modal-body">
    <p>One fine …

我决定如果需要插入自定义Bootstrap模式,我想要一个可以使用的脚本.我不想让每个页面底部都有空的静态Bootstrap模态HTML,如果它不会总是被使用的话.

所以,这可能是错误的做法,但这是我的尝试.我创建了一个变量,它是模态'shell'html.然后,当我单击一个设备项时,它将附加到正文.我有一些内容然后克隆并附加到模态的标题和正文.一切正常.但一旦关闭,我无法移除模态.这与我通过JS插入HTML的事实有关,因为如果Modal shell HTML在我的HTML页面中静态存在,则删除工作正常.

HTML:

<ul>
    <li class="span4 device">
        <div class="inner">
            <h3>Device 4</h3>
            <div class="device-product">
                <img class="device-image" src="img/placeholder-holding-image.png" alt="Holding Image" />
                <a href="#" class="hide">Troubleshoot this item</a>
                <a href="#" class="hide">How to use this product</a>
            </div>
            <div class="device-details">
                <div class="control-group">
                    <label class="control-label">Device Type:</label>
                    <span class="field">Really cool device</span>
                </div>
                <!-- Small amount of hidden additional information -->
                <div class="control-group hide">
                    <label class="control-label">Device ID:</label>
                    <span class="field">123456</span>
                </div>
            </div>
        </div>
    </li>
</ul>

jQuery的:

var customModal = $(
    '<div class="custom-modal modal hide fade" tabindex="-1" role="dialog" aria-hidden="true"> …