Menu
$(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>I want the alert to be displayed in the bootstrap Modal.
369
To close the alert message, add a . alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).
Creates a warning that alerts users about something important and prompts them to take the appropriate action before closing the alert window.
Bootstrap Alerts. Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users. There are four classes that are used within <div> element for alerts.
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">×</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>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
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
