使用JavaScript创建引导模式对话框
Creating Bootstrap Modal Dialog using JavaScript
我正在尝试使用JavaScript创建一个Bootstrap Modal对话框。我之所以使用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中的内置工具)。您会立即看到这个错误:)
相关文章:
- 打开相对于鼠标位置的CSS3/HTML5模式对话框
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- jQuery UI模式对话框覆盖淡出
- 使用Plaid Link显示自定义用户名和密码模式对话框
- 弹出格式化的模式对话框,并在用户确认时转发
- NProgress带有模式对话框以防止点击
- 使用ember模式对话框的ember中的可路由模式
- 如何在 ember.js 中的模式对话框中打开路由
- 将值从模式对话框传递给父级
- 关闭模式对话框而不刷新父级
- 如何在 javascript 中检测引导模式对话框的关闭
- 将参数传递到模式对话框
- 确认删除的模式对话框
- 当我打开模式对话框时,可以看到2个滚动条
- 用于登录/注册Angular应用程序的模式/对话框
- 选中的单选按钮在jQuery模式对话框中不能正常工作
- Safari限制?使用多种方法来显示多个自定义模式对话框
- 如何将事件绑定到模式对话框上的组件
- 单击按钮打开窗口作为使用javascript的模式对话框
- 用JavaScript制作一个按钮的动画,从按钮到屏幕中心弹出一个模式对话框