stackoom
  简体   繁体   中英

How to use multiple buttons on one modal using jquery with bootstrap

 原文  2021-05-08 22:34:01  7   1    javascript/ jquery/ bootstrap-4

Question

Need help with jquery code so that when each button is clicked, the modal will read: "New message to Joe", in the modal-header on web page. Need help with jquery code so that when each button is clicked, the modal will read: "New message to Joe", in the modal-header on web page. Need help with jquery code so that when each button is clicked, the modal will read: "New message to Joe", in the modal-header on web page.Thanks!

    ``` 
    <!doctype html>
<html lang="en">
  <head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Modals, Popovers, & Tootips</title>  
    
  </head>    
  <body>
                      
      <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>

          <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>

          <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
                 
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
          
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

      <script type="text/javascript">
          
          $("exampleModal").click("show.bs.modal", function (event) {
              
              var button = $(event.relatedTarget)
              var recipient = button.data("name")
              var modal = $(this)
              modal.find(".modal-title").text("New message to " + recipient);
          });
          
      </script>
  </body>
    
</html>
```

1 answers

solution1
 0 ACCPTED  2021-05-08 23:15:15

Give each button an identifier we can reference (I am using a class name 'name-button')

<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
<button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>

Then set up their click handlers

$(".name-button").click(function (event) {
   $('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
});

Also don't forget to import jQuery at the top

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Here is the complete page code per your request

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <title>Modals, Popovers, & Tootips</title>
</head>

<body>
    <button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Joe">Email Joe</button>
    <button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Phil">Email Phil</button>
    <button type="button" class="name-button btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-name="Nicki">Email Nicki</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        // we put this code inside document.ready so that it won't try and find the 'name-buttons' until the page has fully loaded
        $(".name-button").click(function(event) {
            $('.modal-header h5.modal-title').html("New message to " + $(this).attr('data-name'));
        });
    })
    </script>
</body>

</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to open multiple modal windows with multiple buttons using only one modal div in Bootstrap 3 How to open one Bootstrap modal on multiple buttons on the same page? One modal bootstrap form submited by multiple buttons Bootstrap Multiple Modal Buttons Can't use one modal with multiple buttons Using JQuery, how can we use one function to use for click event of multiple buttons to display a dialog box How to use hash value to open a bootstrap modal using jquery? How to use a Bootstrap modal to add fields to a form using jQuery Using multiple bootstrap buttons with jquery Ajax How to use bootstrap modal for multiple controllers?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM