2016-04-22 22 views
5

Làm thế nào để hiển thị một cảnh báo trong Bootstrap Modal

$(window).load(function(){ 
 
    $('.alertbox').click(function(){ 
 
    alert('You Clicked on Click Here Button'); 
 
    }); 
 
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> 
 
    
 
<div> 
 
    <a class="alertbox" href="#clicked"> Click Here</a> 
 
</div>

Tôi muốn cảnh báo sẽ được hiển thị trong các phương thức bootstrap.

+0

Bạn không thể chứa các JS hộp cảnh báo. Nếu bạn muốn một cái gì đó như hộp cảnh báo trong một phương thức, thiết kế nó bằng cách sử dụng CSS/HTML và kích hoạt nó bằng cách sử dụng JS/jQuery – Tushar

+0

Một số thông tin về việc tạo một phương thức với bootstrap http://www.w3schools.com/bootstrap/bootstrap_modal.asp http: //getbootstrap.com/javascript/#modals – spaceman

+0

Bạn đang cố gắng hiển thị một phương thức với văn bản "cảnh báo" bên trong? Hay bạn đang cố gắng kích hoạt cảnh báo trình duyệt từ một liên kết trong một phương thức? – cbronson

Trả lời

10

Tạo div lỗi trong cơ thể phương thức. và thiết lập lỗi

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

1

Có lẽ tôi đã không hiểu chính xác câu hỏi của bạn, nhưng bạn không thể sử dụng chức năng cảnh báo để hiển thị thông báo insidea một phần tử trang. Cảnh báo hiển thị cảnh báo hệ thống bên ngoài trang chủ.

Nếu bạn muốn hiển thị thông báo bên trong một phương thức, bạn phải bao gồm (hoặc tiêm) đánh dấu phương thức trong html trang của bạn, sau đó bạn chỉ cần hiển thị/ẩn phương thức thông qua chức năng khởi động.

Bạn có một ví dụ rất tốt here

Các vấn đề liên quan