一页中有多个引导模式答案

【问题标题】：Multiple bootstrap modals in one page一页中有多个引导模式
【发布时间】：2021-10-26 05:24:09
【问题描述】：

您好，我的登录页面上有引导模式

我有许多具有不同数据目标和模式的引导按钮。 modal 中的内容必须基于通过 modals ID 连接到 modal 的按钮数据目标显示如何在不重复代码的情况下解决这个问题？

<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModalLabel">Read more</button>



<div class="modal fade" id="exampleaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Example</h5>
                        <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <img src="" alt="" class="img-fluid mb-5" />
                        <p>Lorem Ipsum</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data- 
                    dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

【问题讨论】：

如何在不重复代码的情况下解决这个问题 这是什么意思？因为你必须复制代码并更改id和data-target
这样我必须复制 button 和 modal 并放置不同的 id 和 data-target
你的意思是一个模态和同一个模态的多个按钮？
我的意思是一种模式，根据按下的按钮显示不同的内容
我有一张引导卡，每张卡都有一个按钮，即模态按钮。所以按下按钮后，我需要显示正确的内容。

标签： javascript html jquery bootstrap-4

【解决方案1】：

看看这个：-

在 jQuery 的帮助下，一页中的多个引导模式

$(document).ready(function(e) {
  // Initializing our modal.
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false,
    show: false,
  });

  $(document).on("click", ".modalButton", function() {

    var ClickedButton = $(this).data("name");

    // You can make an ajax call here if you want. 
    // Get the data and append it to a modal body.


    $(".modal-body").html("<p>" + ClickedButton + "</p> <p>Some text in the modal.</p> ");
    $('#myModal').modal('show');
  });

});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-primary btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-danger btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal">Open Modal 3</button>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-success btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-warning btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

【讨论】：