如何使用JavaScript触发模态？

当我点击一个元素时，我想在我的文档中显示一个模态。我能够使用默认引导“数据切换”和“数据目标”属性使其工作。但是，当我试图用JavaScript实现同样的效果时，模式并没有出现。以下是相关代码：

<span class="navbar-text">
    <a href="" id="login">
        <span class="fa fa-sign-in fa-lg"></span>
        Login
    </a>
</span>

<script>
    $(document).ready(function () {
        $("#login").click(function () {
            $("#loginModal").modal('show');
        });
    });
</script>

$（文档）.ready（函数（）{
$（“#登录”）。单击（函数（）{
$（“#loginModal”）.modal（'show'）；
});
});

它只是在模态中消失了一瞬间，但没有出现

下面是我试图展示的模态div：

<div id="loginModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="content">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login</h4>
                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-row">
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputEmail3">Email address</label>
                            <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
                                placeholder="Enter email">
                        </div>
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputPassword3">Password</label>
                            <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3"
                                placeholder="Password">
                        </div>
                        <div class="col-sm-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox">
                                <label class="form-check-label"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <button type="button" class="btn btn-secondary btn-sm ml-auto"
                            data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm ml-2">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

登录
&时代；
电子邮件地址
密码
记得我吗
取消
登录

您的代码是正确的，但尚未提供任何HTML。我只能假设你按照下面的指南来建立你的网站

编辑：由于您提供了HTML，您的问题是您的

href

是空的，因此它将进入一个空页面。将锚点

href

更改为

#

，或者将其设置为一个按钮，如下面的完整示例所示

。您甚至可以插入一个
onClick
事件，以获得更好的度量

你的固定代码

$（函数（）{
$（“#登录”）。单击（函数（）{
$（“#loginModal”）.modal（'show'）；
});
});
.navbar文本{
显示：块；
边框：薄实线#007bff；
边缘：1米；
填充：0.5em；
边界半径：0.5em；
}

登录
&时代；
电子邮件地址
密码
记得我吗
取消
登录
您的代码是正确的，但尚未提供任何HTML。我只能假设你按照下面的指南来建立你的网站

编辑：由于您提供了HTML，您的问题是您的
href
是空的，因此它将进入一个空页面。将锚点
href
更改为
#
，或者将其设置为一个按钮，如下面的完整示例所示

。您甚至可以插入一个
onClick
事件，以获得更好的度量

你的固定代码

$（函数（）{
$（“#登录”）。单击（函数（）{
$（“#loginModal”）.modal（'show'）；
});
});
.navbar文本{
显示：块；
边框：薄实线#007bff；
边缘：1米；
填充：0.5em；
边界半径：0.5em；
}

登录
&时代；
电子邮件地址
密码
记得我吗
取消
登录
你也可以共享HTML吗？你指的是实际的模态div吗？是的，你使用的代码是正确的，因此除非你共享HTML，否则没有办法帮助你。我已经编辑了问题并放入模态div。找到了问题，看到下面的回复。你也可以共享HTML吗？你是指实际的模态div吗？是的，你使用的代码是正确的，所以除非你共享HTML，否则没有办法帮助你。我已经编辑了问题并放入模态div。找到问题，请参阅下面的回复。