Question

我使用javascript和bootstrap模式对话框创建了一个有用的通用消息框。我（可能还有其他人）可以在任何地方使用它。我想把它提取到一个js文件中，这样我就可以在其他项目中引用这个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>

Answer 1

这样做不是很惯用，更不用说合理了。尽管如此，假设您不需要符合ES5，您可以将整个内容转储到模板文字中。然后你把它推到剧本中的某个地方的dom。

const template = `
    <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>
`

$('somehidden div').html(template);

这是ES5版本

    var template = '<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>';
$('somehidden div').html(template);

<强>更新

更易于维护的解决方案：

获取此html并将其放入其自己的文件modal.html。

   <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>

拿起你的JS并把它放在自己的文件modal.js

中

      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();

在文档中使用

<html>
<head>
  <script type="text/javascript>
    $(function() {
      $( body ).load( "path/to/modal.html" );
    });
  </script>
<script src="path/to/modal.js" type="text/javascript"></script>
</head>

Answer 2

我在etherealite的帮助下研究了如何做到这一点 - 他的答案并不完整但指向了正确的方向。

现在它比bootbox.js 更好，因为

它可以做bootbox.js可以做的一切;
使用语法更简单
它允许您使用＆＃34;错误＆＃34;，＆＃34;警告＆＃34;优雅地控制邮件的颜色。或＆＃34; info＆＃34;
Bootbox长986行，我的只有110行

<强> digimango.messagebox.js ：

＆＃13;

const dialogTemplate = '\
    <div class ="modal" id="digimango_messageBox" role="dialog">\
        <div class ="modal-dialog">\
            <div class ="modal-content">\
                <div class ="modal-body">\
                    <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\
                    <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\
                </div>\
                <div class ="modal-footer">\
                    <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\
                    <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\
                </div>\
            </div>\
        </div>\
    </div>';


// See the comment inside function digimango_onOkClick(event) {
var digimango_numOfDialogsOpened = 0;


function messageBox(msg, significance, options, actionConfirmedCallback) {
    if ($('#digimango_MessageBoxContainer').length == 0) {
        var iDiv = document.createElement('div');
        iDiv.id = 'digimango_MessageBoxContainer';
        document.getElementsByTagName('body')[0].appendChild(iDiv);
        $("#digimango_MessageBoxContainer").html(dialogTemplate);
    }

    var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText;

    if (options == null) {
        okButtonName = 'OK';
        cancelButtonName = null;
        showTextBox = null;
        textBoxDefaultText = null;
    } else {
        okButtonName = options.okButtonName;
        cancelButtonName = options.cancelButtonName;
        showTextBox = options.showTextBox;
        textBoxDefaultText = options.textBoxDefaultText;
    }

    if (showTextBox == true) {
        if (textBoxDefaultText == null)
            $('#digimango_messageBoxTextArea').val('');
        else
            $('#digimango_messageBoxTextArea').val(textBoxDefaultText);

        $('#digimango_messageBoxTextArea').show();
    }
    else
        $('#digimango_messageBoxTextArea').hide();

    if (okButtonName != null)
        $('#digimango_messageBoxOkButton').html(okButtonName);
    else
        $('#digimango_messageBoxOkButton').html('OK');

    if (cancelButtonName == null)
        $('#digimango_messageBoxCancelButton').hide();
    else {
        $('#digimango_messageBoxCancelButton').show();
        $('#digimango_messageBoxCancelButton').html(cancelButtonName);
    }

    $('#digimango_messageBoxOkButton').unbind('click');
    $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick);

    $('#digimango_messageBoxCancelButton').unbind('click');
    $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick);

    var content = $("#digimango_messageBoxMessage");

    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);

    if (digimango_numOfDialogsOpened == 0)
        $("#digimango_messageBox").modal();

    digimango_numOfDialogsOpened++;
}

function digimango_onOkClick(event) {
    // JavaScript's nature is unblocking. So the function call in the following line will not block,
    // thus the last line of this function, which is to hide the dialog, is executed before user
    // clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count
    // how many dialogs is currently showing. If we know there is still a dialog being shown, we do
    // not execute the last line in this function.
    if (typeof (event.data.callback) != 'undefined')
        event.data.callback($('#digimango_messageBoxTextArea').val());

    digimango_numOfDialogsOpened--;

    if (digimango_numOfDialogsOpened == 0)
        $('#digimango_messageBox').modal('hide');
}

function digimango_onCancelClick() {
    digimango_numOfDialogsOpened--;

    if (digimango_numOfDialogsOpened == 0)
        $('#digimango_messageBox').modal('hide');
}

＆＃13;

使用 digimango.messagebox.js ：

＆＃13;

<!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 src="~/Scripts/bootbox.js" type="text/javascript"></script>

    <script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script>


    <script type="text/javascript">
        function testAlert() {
            messageBox('Something went wrong!', 'error');
        }

        function testAlertWithCallback() {
            messageBox('Something went wrong!', 'error', null, function () {
                messageBox('OK clicked.');
            });
        }

        function testConfirm() {
            messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () {
                messageBox('Are you sure you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' });
            });
        }

        function testPrompt() {
            messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (userInput) {
                messageBox('User entered "' + userInput + '".');
            });
        }

        function testPromptWithDefault() {
            messageBox('How do you feel now?', 'normal', { showTextBox: true, textBoxDefaultText: 'I am good!' }, function (userInput) {
                messageBox('User entered "' + userInput + '".');
            });
        }

    </script>
</head>

<body>
    <a href="#" onclick="testAlert();">Test alert</a> <br/>
    <a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br />
    <a href="#" onclick="testConfirm();">Test confirm</a> <br/>
    <a href="#" onclick="testPrompt();">Test prompt</a><br />
    <a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br />
</body>

</html>

＆＃13;

如何在js文件中包含HTML？

2 个答案: