http://bootboxjs.com/
以下、サンプルです。
bootbox.min.jsをDLします。今回は、v3.2.0を用いました。
https://github.com/makeusabrew/bootbox
当然ですが、BootstrapもDLします。今回は、v2.3.2を用いました。
http://twitter.github.io/bootstrap/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootbox.min.js"></script>
</head>
<body>
<button id="confirm" class="btn">Confirm</button>
<script>
$('#confirm').click(function() {
var confirm = bootbox.confirm('Are you sure?', function(result) {
// OKならtrueに、Cancelならfalseになります
console.log(result);
});
// Modal内の要素にも簡単にアクセスできます
console.log(confirm.find('.btn-primary').text());
});
</script>
</body>
</html>
非常に簡単ですね。Confirm以外にも
* Alert
* Prompt
* Custom Dialog
と用意されています。
No comments:
Post a Comment