文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建动态引导模式？

问如何创建动态引导模式？
EN

Stack Overflow用户

提问于 2020-09-13 11:23:54

回答 1查看 34关注 0票数 0

例如，我有3个标签，每个标签都有不同的目标数据。

<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata">
    DATA 1
</a>
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#seconddata">
    DATA 2
</a>
<a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#thirddata">
    DATA 3
</a>

我怎样才能得到不同的id，标题，以及模式的内容?我不会创建3个模式，我只使用一个模块的代码

<div class="modal fade" id="firstdata" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">FIRST DATA</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>FIRST DATA CONTENT</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

javascript

php

html

bootstrap-4

回答 1

Stack Overflow用户

发布于 2020-09-13 12:05:37

在脚本中添加以下J查询代码

$(document).on('click','.btn-sm',function(){
       
        $("#firstdata").modal();
});

请不要忘记导入J查询，否则将无法正常工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

上面的代码应该在bootstrap导入之上

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63866846

复制

相似问题

问如何创建动态引导模式？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建动态引导模式？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建动态引导模式？
EN