Bootstrap 4模态框无data-toggle/data-target不生效，如何用jQuery控制？

没问题，我来帮你完善这段代码，不用依赖data-toggle和data-target属性，纯jQuery就能搞定Bootstrap 4模态框的显示与隐藏~

核心代码实现 #

首先要确保代码在DOM加载完成后执行，同时处理a标签的默认跳转行为，避免影响模态框的正常显示。完整代码如下：

// 等待DOM加载完成后绑定事件
$(document).ready(function() {
    // 点击登录链接打开模态框
    $('#show_login_modal').click(function(e) {
        // 阻止a标签默认的跳转/刷新行为
        e.preventDefault();
        // 调用Bootstrap模态框的show方法
        $('#login_modal').modal('show');
    });

    // 点击自定义关闭按钮隐藏模态框
    $('#close_login_modal').click(function() {
        // 调用Bootstrap模态框的hide方法
        $('#login_modal').modal('hide');
    });
});

关键注意事项 #

• 依赖顺序不能错：页面必须先引入jQuery（Bootstrap 4要求jQuery版本≥1.9.1），再引入Bootstrap 4的JS文件，否则模态框方法会失效。
• a标签处理：给登录链接的点击事件加上e.preventDefault()，避免空href导致页面跳转或刷新，打断模态框的显示流程。
• Bootstrap模态框规范：你的模态框HTML结构要符合Bootstrap 4的标准（比如包含.modal-dialog、.modal-content容器），否则即使调用方法也可能显示异常。

另外，Bootstrap模态框默认支持点击背景遮罩或按ESC键关闭，这部分不需要额外写代码，框架已经内置了这些功能~

内容的提问来源于stack exchange，提问作者johnW