Question

许多人建议避免使用cfwindow等coldfusion UI标记。亚当卡梅隆＆amp; 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>

Answer 1

使用以下代码。只需确保在data-toggle代码中正确设置data-target和anchor属性

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

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

1 个答案: