Bootstrap 4 点击a标签触发modal无法打开仅跳转页顶问题求助

问题修复方案 #

核心错误点 #

你当前代码的直接问题是模态框触发标签的data-target属性缺少锚点标识符#，导致Bootstrap无法匹配到对应ID的模态框组件，点击后只会触发href="#"的默认锚点跳转行为，回到页面顶部。

将触发a标签的data-target="myModal"修改为data-target="#myModal"即可解决核心问题。 #

其他同步优化项 #

• 模态框关闭按钮缺少关闭触发属性，补充data-dismiss="modal"即可实现点击关闭模态框
• 可以将触发a标签的href="#"替换为href="javascript:void(0)"，彻底避免点击后页面回退到顶部的问题
• 确保页面已经按顺序引入jQuery库、Bootstrap JS文件，模态框组件依赖这两个资源才能正常运行

修正后完整代码 #

<div class="container-fluid signup-container">
<div class="row signup-row">
    <div class="col-md-12 signup-col">
        <div class="signup-section-text">
            <h4 class="signup-text">Aanmelden</h4>
            <div class="modal fade" id="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1>Title</h1>
                        </div>
                        <div class="modal-body">
                            This is body
                        </div>
                        <div class="modal-footer">
                            <input class="btn btn-default" value="Close" data-dismiss="modal">
                        </div>
                    </div>
                </div>
            </div>
            <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">Meer informatie</a>
        </div>
        <a href="#" class="signup-button">
            <h5 class="hero-title mx-auto">Wordt een held!</h5>
        </a>
    </div>
</div>

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