ページのソースを見ると、知っておく必要のあるすべてがわかります。
<!-- Confirm -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script src='js/confirm.js' type='text/javascript'></script>
と
<div id='confirmDialog'><h2>Confirm Override</h2>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<form action='download/' method='post'>
<input type='button' name='confirm' value='Demo' class='confirm demo'/><input type='button' name='download' value='Download' class='demo'/>
<input type='hidden' name='demo' value='confirm'/>
</form>
</div>
<div id='confirm' style='display:none'>
<a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a>
<div class='header'><span>Confirm</span></div>
<p class='message'></p>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
上記では、メッセージングがすべてHTMLで行われ、JavaScriptではまったく行われていないことがはっきりとわかります。
次に、confirm.jsのJSソースを見ると、初期化/トリガーする方法の観点から、すべてがそこに配置されています。
/*
* SimpleModal Confirm Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2009 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: confirm.js 185 2009-02-09 21:51:12Z emartin24 $
*
*/
$(document).ready(function () {
$('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
close:false,
position: ["20%",],
overlayId:'confirmModalOverlay',
containerId:'confirmModalContainer',
onShow: function (dialog) {
dialog.data.find('.message').append(message);
// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}