Bootstrap provided interactive modal and alert classes now i’m going to combine both alert and modal. Modal creates popup and dialog like experience and alerts are used to display notification messages. There are different types of indication colors for alert. Lets see how to use alert along with modal popup. Actually it is good idea in most cases it is very useful in real time senario. When ever we click on submit button it displays a modal popup along with alert message. If you want to close message simply click on the right side close icon of alert message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Alert and Modal Example</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body style="margin-top: 70px;">
<div>
<header class="container">
<h4>Alert Along With Modal Dialog Box</h4>
</header>
<section class="container">
<div class="alert alert-warning collapse" id="sentAlert">
<a href="#" data-dismiss="alert" class="close">×</a>
<p>This is warning message</p>
</div>
<div class="tab-content">
<div class="well" id="formTab">
<div class="row">
<form class="form-horizontal" id="contactForm">
<div class="form-group">
<label for="emailInput" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" name="emailInput" class="form-control"
placeholder="e.g. Your Email" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<div class="modal" id="sentDialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h4>Thanks for clicking</h4>
</div>
<div class="modal-body">
<p>This is modal body</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script >
(function () {
"use strict";
var $sentDialog = $("#sentDialog");
$("#contactForm").on("submit", function () {
$sentDialog.modal('show');
return false;
});
var $sentAlert = $("#sentAlert");
$sentDialog.on("hidden.bs.modal", function () {
//alert("close");
$sentAlert.show();
});
$sentAlert.on("close.bs.alert", function () {
$sentAlert.hide();
return false;
});
})();
</script>
</body>
</html>
0 comments:
Post a Comment