一页中的多个引导模式

Question

Hello I have Bootstrap Modals on my landing page您好，我的着陆页上有 Bootstrap Modals

I have many bootstrap buttons with different data targets and modals.我有许多具有不同数据目标和模式的引导按钮。 The content inside the modal must be displayed based on the buttons data target which is connected to the modal via modals ID How can I solve this without duplication of code?模态内的内容必须基于通过模态 ID 连接到模态的按钮数据目标显示我如何在不重复代码的情况下解决这个问题？

<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>

Answer 1

Check this out:-看一下这个：-

Multiple bootstrap modals in one page with the help of jQuery在 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>

一页中的多个引导模式

问题描述

1 个解决方案

解决方案1
0 2021-08-26 06:48:58

一页中的多个引导模式

问题描述

1 个解决方案

解决方案1 0 2021-08-26 06:48:58

解决方案1
0 2021-08-26 06:48:58