0
javascriptとbootstrapモーダルダイアログを使って、便利な汎用メッセージボックスを作成しました。私（そして潜在的に他人）はどこでもそれを使うことができます。私はjsファイルに展開したいので、他のプロジェクトのjsファイルを参照するだけです。しかし、私はブートストラップモーダルダイアログのHTMLコードブロックをどのように含めるか分かりません。jsファイルにHTMLを含めるにはどうすればいいですか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A useful generic message box</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
function testAlert() {
messageBox('Something went wrong!', 'error', null, function() {
alert('Message dialog closed.');
});
}
function testConfirm() {
messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function() {
alert('"Yes" was selected.');
});
}
function testPrompt() {
messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (event) {
alert('User entered "' + event.data.getUserInput() + '".');
});
}
function messageBox(msg, significance, options, actionConfirmedCallback) {
var okButtonName, cancelButtonName, showTextBox;
if (options == null) {
okButtonName = 'OK';
cancelButtonName = null;
showTextBox = null;
} else {
okButtonName = options.okButtonName;
cancelButtonName = options.cancelButtonName;
showTextBox = options.showTextBox;
}
if (showTextBox == true)
$('#MessageDialogTextArea').show();
else
$('#MessageDialogTextArea').hide();
//if (typeof (okButtonName) != 'undefined')
if (okButtonName != null)
$('#messageDialogOkButton').html(okButtonName);
else
$('#messageDialogOkButton').html('OK');
//if (typeof (cancelButtonName) == 'undefined')
if (cancelButtonName == null)
$('#messageDialogCancelButton').hide();
else {
$('#messageDialogCancelButton').show();
$('#messageDialogCancelButton').html(cancelButtonName);
}
$('#messageDialogOkButton').unbind('click');
if (typeof (actionConfirmedCallback) != 'undefined')
$('#messageDialogOkButton').on('click', { getUserInput: getUserInput }, actionConfirmedCallback);
else
$('#messageDialogOkButton').removeAttr('onclick');
var content = $("#MessageDialogContent");
if (significance == 'error')
content.attr('class', 'text-danger');
else if (significance == 'warning')
content.attr('class', 'text-warning');
else
content.attr('class', 'text-success');
content.html(msg);
$("#MessageDialog").modal();
}
</script>
</head>
<body>
<a href="#" onclick="testAlert();">Test alert</a> <br/>
<a href="#" onclick="testConfirm();">Test confirm</a> <br/>
<a href="#" onclick="testPrompt();">Test prompt</a>
<div class="modal fade" id="MessageDialog" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p class="text-success" id="MessageDialogContent">Some text in the modal.</p>
<p><textarea id="MessageDialogTextArea" cols="70" rows="5"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="messageDialogOkButton">OK</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="messageDialogCancelButton">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
を[JSにHTMLコードを含む]（http://stackoverflow.com/questions/12216391/includeの可能性のある複製を-html-code-in-js） –
テンプレートエンジンを使用する必要があります。 – SLaks