Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/powershell/12.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用JavaScript创建引导模式对话框_Javascript_Jquery_Html_Twitter Bootstrap_Modal Dialog - Fatal编程技术网

使用JavaScript创建引导模式对话框

使用JavaScript创建引导模式对话框,javascript,jquery,html,twitter-bootstrap,modal-dialog,Javascript,Jquery,Html,Twitter Bootstrap,Modal Dialog,我正在尝试使用JavaScript创建一个引导模式对话框。我之所以使用JavaScript,是因为我希望以后能够使用自定义元素(即标题、错误消息)呈现它。我对JavaScript相当陌生,所以我不明白为什么调用函数errorMessage()时不执行代码。谁能帮我一个忙,让我知道错误是什么,我怎样才能改正它?有没有更有效的方法?多谢各位 顺便说一句,我确实将modal.js文件链接到HTML文档,我知道bootboxjs,但我现在不想使用它 // Creation of the alert me

我正在尝试使用JavaScript创建一个引导模式对话框。我之所以使用JavaScript,是因为我希望以后能够使用自定义元素(即标题、错误消息)呈现它。我对JavaScript相当陌生,所以我不明白为什么调用函数errorMessage()时不执行代码。谁能帮我一个忙,让我知道错误是什么,我怎样才能改正它?有没有更有效的方法?多谢各位

顺便说一句,我确实将modal.js文件链接到HTML文档,我知道bootboxjs,但我现在不想使用它

// Creation of the alert message box.
function errorMessage() {
    var Modal = document.createElement('div');
    Modal.id = 'myModal';
    Modal.className = 'modal fade show';
    // To set up the attributes.
    Modal.setAttribute("data-backdrop", "static");
    Modal.setAttribute("data-keyboard", false);
    document.body.appendChild(Modal);

        var dialog = document.createElement('div');
        dialog.className = 'modal-dialog';
        Modal.appendChild(dialog);

            var content = document.createElement('div');
            content.className = 'modal-content';
            dialog.appendChild(content);

                var header = document.createElement('div');
                header.className = 'modal-header';
                content.appendChild(header);

                    var title = document.createElement('h4');
                    title.className = 'modal-title';
                    title.createTextNode = 'Data Error';
                    header.appendChild(header);

                var body = document.createElement('div');
                body.className = 'modal-body';
                dialog.appendChild(body);

                    var message = document.createElement('p');
                    message.createTextNode("Oh... snap. We can't find any items in your list. Please make sure your entry is structured as following:");
                    body.appendChild(message);

                    var representation = document.createElement('div');
                    representation.className = 'well';
                    body.appendChild(representation);

                        var representationTxt = document.createElement('p');
                        representationTxt.style.fontStyle = 'italic';
                        representationTxt.createTextNode('> Subheader , tag1 , tag2, tag3');
                        representation.appendChild(representationTxt);

                var footer = document.createElement('div');
                footer.className = 'modal-footer';
                dialog.appendChild(footer);

                    var closeBtn = document.createElement('button');
                    closeBtn.setAttribute("data-dismiss", "modal");
                    closeBtn.setAttribute("type", "button");
                    closeBtn.className = 'btn btn-primary btn-inverse';
                    closeBtn.value = 'I got it. Thanks.';
                    footer.appendChild(closeBtn);

    // Show modal dialog box
    $("#myModal").modal('show');

}

此行失败:
header.appendChild(header)因为它无法将头附加到自身。你是说这个吗

var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(title);

调试工具在javascript开发中非常宝贵(例如Firefox的Firebug插件或Chrome中的内置工具)。您可能会立即看到这个错误:)

您实际使用的是jQuery吗?如果是这样的话,您可以使用所需的类和
隐藏的
类对这些元素进行硬编码(而不是使用JavaScript)。然后,当事件发生时,删除
隐藏的
类。