Question

我可以使用这段代码加载模态而没有任何问题。

<button type="button" class="btn btn-danger btn-sm" id="sweet_prompt">
    Deploy Code <i class="icon-play3 position-right"></i>
</button>

但是，我需要它作为HTML链接而不是按钮（不想弄乱主题的CSS样式）。点击链接时没有任何反应。

<a href="#" data-target="#sweet_prompt" data-toggle="modal">
    <i class="icon-history position-left"></i>Deploy Code
</a>

修正：我对其进行了修改，以便以这种方式构建链接。

<a id="sweet_prompt">Deploy Code</a>

Answer 1

鉴于我们（目前）不知道模态是如何被触发的，我将假设听众附加到button#sweet_prompt或者只是#sweet_prompt。

重写链接的HTML以使用侦听器附加到的选择器，或重写侦听器以附加到<a/>元素。

Answer 2

看一下这个例子：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/mmfansler/aQ3Ge/show/">
  <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">
    <p>One fine body…</p>
  </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>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

＆＃13;

如何使用HTML链接加载模式

2 个答案: