<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://rawgithub.com/makeusabrew/bootbox/master/bootbox.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button id="bootbox" class="btn">Open dialog</button>
</body>
<div class="form-content" style="display:none;">
<form class="form" role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="test@mail.ru"></input>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
</div>
</html>
$(document).ready(function() {
$("#bootbox").on("click", function(event) {
var modal = bootbox.dialog({
message: $(".form-content").html(),
title: "Your awesome modal",
buttons: [
{
label: "Save",
className: "btn btn-primary pull-left",
callback: function() {
alert($('form #email').val());
return false;
}
},
{
label: "Close",
className: "btn btn-default pull-left",
callback: function() {
console.log("just do something on close");
}
}
],
show: false,
onEscape: function() {
modal.modal("hide");
}
});
modal.modal("show");
});
});
/* Styles go here */
body {
padding: 10px;
}