How to display an Alert in Bootstrap Modal

前端 未结 2 1597
囚心锁ツ
囚心锁ツ 2020-12-29 10:36

$(window).load(         


        
相关标签:
2条回答
  • 2020-12-29 10:53

    Probably I didn't understood your question correctly, but you can't use the alert function to display a message insidea a page element. Alert displays a system alert outside the page dom.

    If you want to display a message inside a modal you have to include (or inject) the modal markup in your page html, then you simply show/hide the modal via bootstrap functions.

    You have a very good example here

    0 讨论(0)
  • 2020-12-29 10:58

    Create the error div in modal body. and set error

    $(document).ready(function(){
      $('#alertbox').click(function(){
        $("#error").html("You Clicked on Click here Button");
          $('#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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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-info btn-lg" id="alertbox">Click here</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 id="error"></p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    
    </body>
    </html>

    0 讨论(0)
提交回复
热议问题