如何使用链接而不是按钮来调用弹出窗口答案

【问题标题】：How to use a link instead of a button to call a pop up window如何使用链接而不是按钮来调用弹出窗口
【发布时间】：2015-07-15 00:27:17
【问题描述】：

许多人建议避免使用coldfusion UI 标签，例如cfwindow。 Adam Cameron 和 Ray Camden 在 http://static.raymondcamden.com/cfuitherightway/ 以正确的方式创建了 ColdFusion UI，因此人们可以有其他选择。

我需要一个弹出窗口，我不介意不使用 ColdFusion UI 标签 cfwindow。我所需要的只是当用户单击链接时，会出现一个弹出窗口。我的 Ray Camden 给出的示例是使用按钮而不是链接。我需要一个链接来打开一个弹出窗口，因为我想向我的用户详细解释我的段落中的某些内容，所以我不能使用按钮。

如何将按钮更改为下面示例中的链接，可以吗？我试过操纵它，但没有成功。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test1</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>

    <!--- I need to replace this button with a link, How can I do it? --->

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!--- button ends here --->


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>I have some content right here <cfoutput>#Now()#</cfoutput></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>

【问题讨论】：

可以在任何元素上使用点击事件来打开一个模态。如果引导程序需要按钮进行自动初始化（甚至不确定是否如此），只需在您自己的事件处理程序中自己初始化模态。简单例子bootply.com/HzQXGTkgs5
使用 Bootstrap 3.0.3 有什么原因吗？

标签： javascript jquery css twitter-bootstrap-3 coldfusion

【解决方案1】：

使用下面的代码。只需确保在您的anchor 标签中正确设置data-toggle 和data-target 属性

<a href="#" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</a>

【讨论】：