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

标签 javascript jquery css twitter-bootstrap-3 coldfusion

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

我需要一个弹出窗口,我不介意不使用 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>

最佳答案

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

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

关于javascript - 如何使用链接而不是按钮来调用弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31419570/

相关文章:

javascript - 如何在 javascript 中强制声明变量或如何检查它?

javascript - Node NPM 语法错误 : Unexpected token import

javascript - Fabric.js 使用旋转 handle 将旋转限制为 x 度

javascript - 如何在使用javascript修改dom时只修改 "text"

css - 在移动设备的 slider 内缩放图像

javascript - 在普通 TypeScript 文件中导入 Vue 组件失败

jquery - 960 网格内的中心菜单

javascript - 为什么我不能将这些附加数据推送到我的数组中?

jquery - Addclass 使 img 元素在位置方面不粘

javascript - 如何限制 1 div 与另一个 div 的距离不超过一定长度?