- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个 vanilla JavaScript 模态,当从 HTML 文件(或 JS 文件)实例化它时,它具有由用户自定义的能力。但是,在处理关闭模式的 close() 函数时,不是一次关闭一个模式,而是使用它的关闭按钮,第一个模式的关闭按钮关闭页面的所有模式。我不确定我做错了什么......
我研究过其他类似的 vanilla JavaScript、可自定义的模式库,但它们中的大多数要么使用 jQuery,要么使用某些框架,要么包括很多我不熟悉的复杂功能(我还是个初学者)。我在 GitHub、CodePen、Google 和这里进行了研究;但我还没有找到满足我需要的解决方案。
由于代码比较长,建议大家直接去我的CodePen账号,那里有完整的代码。
https://codepen.io/jdriviere/pen/zYOyJvv?editors=0011
但这是我的 close() 函数:
Modal.prototype.close = function() {
let modal = document.getElementById(this.options.id);
let modalBody = modal.children[0];
// Delete elements from Modal Body
for (let i = 0; i < modalBody.children.length; i++) {
modalBody.removeChild(modalBody.children[i]);
} // End of LOOP
// Delete Modal Body from Modal
modal.removeChild(modalBody);
// Delete Modal from DOM
modal.style.display = 'none';
document.body.removeChild(modal);
return this;
};
我希望代码一次关闭一个模态,最好是具有正确 ID 的模态(应由用户分配或默认情况下具有“NoID”ID)。相反,如果我关闭后续模态,它会关闭它们;但是如果我关闭第一个,它会关闭所有的。另外,有没有办法在您创建模态实例后立即初始化()模态功能(我讨厌手动启动它们)?如果是这样,请在此处也包含您的解决方案(如果要求不多的话)。
现在已经有一段时间了。非常感谢您的帮助。
谢谢。 :)
最佳答案
您的代码中有几个错误:
n/a
对于没有 id
的模式他们的属性(property) options
目的。使用这样的 id
将在您使用 jQuery 时破坏查询选择器。init()
函数两次,每次调用 init()
closeBtn
正在选择两个模式的关闭按钮,并将点击事件处理程序分配给每个模式两次。这就是当您单击一个按钮时另一个按钮的单击事件正在执行的原因。因此,您可以做的是,仅将点击功能与 init()
所在模式的关闭按钮相关联一次。函数被调用。我用了let closeBtn = document.querySelector('#'+this.options.id + ' .modal-close');
在 init()
中选择那个特定的关闭按钮功能。 总体而言,您的 JS 代码如下所示:
/**
* Blueprint function (class) that describes a Modal object.
* @param {Object} options Object parameter containing elements that describe the Modal.
* @returns {Object} options Returns options from current modal object.
*/
function Modal(options) {
// If constructor params is available
if (options) {
this.options = options;
} else {
this.options = {};
} // End of IF-ELSE
// Add to options object
if (options.id) {
// Check type of ID entry
if (typeof options.id === 'number') {
this.options.id = options.id.toString();
} else {
this.options.id = options.id;
} // End of IF-ELSE
} else if (options.id === undefined) {
this.options.id = 'NA';
} // End of IF-ELSE
if (options.name) {
this.options.name = options.name;
} // End of IF
if (options.closable) {
this.options.closable = options.closable;
} // End of IF
return this;
};
// Prototypes
/**
* Displays some information concerning the current Modal object.
* @returns {Object} this Returns current modal object.
*/
Modal.prototype.open = function() {
let demo = document.getElementById('demo');
return this;
};
/**
* Creates an instance of a Modal object with the specified object elements.
* @returns {Object} this Returns current Modal object.
*/
Modal.prototype.create = function() {
// Create Modal Element
let modal = document.createElement('div');
let modalBody = document.createElement('div');
// Create Modal
!modal.classList.contains('modal') ?
modal.classList.add('modal') :
modal.classList.add('');
modal.id = this.options.id || 'noID';
// Create modal body element
!modalBody.classList.contains('modal-body') ?
modalBody.classList.add('modal-body') :
modalBody.classList.add('');document.querySelector('#' + this.options.id + ' .modal-close');
modal.appendChild(modalBody);
// Adding modal sub-elements
if (this.options.title) {
let modalTitle = document.createElement('h2');
!modalTitle.classList.contains('modal-title') ?
modalTitle.classList.add('modal-title') :
modalTitle.classList.add('');
modalTitle.textContent = this.options.title;
modalBody.appendChild(modalTitle);
console.log('Added title!');
} // End of IF
if (this.options.subtitle) {
let modalSubtitle = document.createElement('h4');
!modalSubtitle.classList.contains('modal-subtitle') ?
modalSubtitle.classList.add('modal-subtitle') :
modalSubtitle.classList.add('');
modalSubtitle.textContent = this.options.subtitle;
modalBody.appendChild(modalSubtitle);
console.log('Added subtitle!');
} // End of IF
if (this.options.content) {
let modalContent = document.createElement('p');
!modalContent.classList.contains('modal-content') ?
modalContent.classList.add('modal-content') :
modalContent.classList.add('');
modalContent.textContent = this.options.content;
modalBody.appendChild(modalContent);
console.log('Added contents!');
} // End of IF
if (this.options.closable) {
let modalClose = document.createElement('span');
!modalClose.classList.contains('modal-close') ?
modalClose.classList.add('modal-close') :
modalClose.classList.add('');
modalClose.innerHTML = '×';
modalBody.appendChild(modalClose);
console.log('Close button added!');
} // End of IF
document.body.appendChild(modal);
console.log('Modal created with ID', modal.id);
return this;
};
/**
* Closes the current Modal object.
* @returns {Object} this Returns current Modal object.
*/
Modal.prototype.close = function() {
let modal = document.getElementById(this.options.id);
let modalBody = modal.children[0];
// Delete elements from Modal Body
for (let i = 0; i < modalBody.children.length; i++) {
modalBody.removeChild(modalBody.children[i]);
} // End of LOOP
// Delete Modal Body from Modal
modal.removeChild(modalBody);
// Delete Modal from DOM
modal.style.display = 'none';
document.body.removeChild(modal);
return this;
};
/**
* Initializes the inner functions of the modal, such as the closing capacity.
* @returns {Object} this Returns current Modal object.
*/
Modal.prototype.init = function(e) {
// let closeBtnAll = document.querySelectorAll('.modal-close');
let closeBtn = document.querySelector('#'+this.options.id + ' .modal-close');
// Assign close() function to all close buttons
closeBtn.addEventListener('click', () => {
if (this.options.closable) {
this.close();
}
})
// Press ESC to close ALL modals
return this;
};
// Create a Modal object
let modal1 = new Modal({
id: 'post1',
name: 'modal',
title: 'First Post',
subtitle: 'I contain all the elements',
content: 'This is awesome!',
closable: true
});
let modal2 = new Modal({
title: 'Second Post',
subtitle: 'Trying new things',
content: 'Hehehehehe',
closable: true
});
modal1.open();
modal1.create();
modal1.init();
modal2.open();
modal2.create();
modal2.init();
只需在您的代码笔中替换上面的 JS 代码并尝试。它会起作用。
关于javascript - 如何修复 'One Closing Button Closes All Modals',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58057278/
此错误显然源于 xlsxwriter。我不确定它来自我的代码的哪一行,因为每次我尝试调试时,我的编辑器 Visual Studio 2019 都会崩溃。但是,在使用 VPN 和远程桌面连接时,我在笔记
我有一个用于原型(prototype)的游戏数据表。我在工作时生成数据,但当我离开并且我的机器进入休眠状态时,数据生成停止。这导致我的元素收藏出现很大差距。 我希望能够移动表格的 DateTimeCr
我正在使用wavesurfer在我的网页上显示歌曲波形。我正在使用以下代码 - function setupSongwaves(songJson) { var songwaveid = '#s
我是 JDBC 新手... Student类有Constructor、add()、update()和delete()等方法... 在构造函数中打开连接。下面代码中的 conn.close() 和 ps
考虑以下代码,它是许多 ChannelFactory 示例的典型代码: WSHttpBinding myBinding = new WSHttpBinding(); EndpointAddress m
我正在阅读 Java Data Access — JDBC、JNDI 和 JAXP,了解 Connection、PooledConnection 接口(interface)。据我了解, PooledC
我正在做我的第一个 android 学习教程,但遇到了标题描述的这个错误..这是我试图在 Eclipse 上做的应用程序,java,这是我的代码..(代码是自动生成的由项目) package com.
我正在使用 JPA、Hibernate、Jboss 和容器管理事务。当我尝试用数据保存我的大实体时,它会抛出以下异常。将我的实体视为图形模型。这个异常并不是每次都会抛出。 ERROR [org.jbo
我有 GWT 应用程序,它与 AdaptivePayment API 上的灯箱集成。 我无法使用提供的代码关闭取消/返回页面: dgFlow = top.dgFlow || top.opener.to
即使我已经实现了上述方法 close(),Eclipse 仍向我显示上述错误。 代码如下: public void update_project(View view) { EditText c
在我的网络应用程序中,我广泛使用了数据库。 我有一个抽象的 servlet,所有需要数据库连接的 servlet 都继承自它。该抽象 servlet 创建一个数据库连接,调用必须由继承 servlet
我在这里看到很多答案都说要使用 close() 来销毁套接字,但我使用的指南来自 msdn让我使用 closesocket()。我想知道是否存在差异,是否有理由使用其中一种。 在这两种情况下,我都看到
我在 python 中使用 with 语句( PEP 343 ) 时遇到了一些问题,以便在上下文之后自动管理资源清理。特别是,with 语句 始终假定资源清理方法是 .close()。 IE。在下面的
在本地连接上调用 RTCPeerConnection.close() 时,我希望远程连接接收到 closed connectionstatechange 事件。 相反,几秒钟后出现disconnect
我正在使用 netty 3.6.6。 有人可以解释以下两个代码之间的区别吗? channel.close(); channel.write(ChannelBuffers.EMPTY_BUFFER).a
WebSocket.readyState可以是CONNECTING、OPEN、CLOSING或CLOSED。 CLOSING 和 CLOSED 状态有什么区别?为什么区分这两种状态很有用?我可以将 C
想象一下,您在 Python 中打开了某个文件(无论是用于读取、写入还是其他)。我刚刚注意到,当您想关闭该文件时,您可以输入: somefile.close() 或者您可以输入: somefile.c
我在我的应用程序的各种类和线程中打开、访问、写入等数据库。我有一个数据库 self.run_params["db"] 我在整个应用程序中都使用它来访问。 问题 1:我是否应该在每次访问后关闭光标? 问
我正在尝试创建一个 vanilla JavaScript 模态,当从 HTML 文件(或 JS 文件)实例化它时,它具有由用户自定义的能力。但是,在处理关闭模式的 close() 函数时,不是一次关闭
所以这可能是一个菜鸟类型的问题,但这就是我想知道的。 假设我有两个屏幕,第一个屏幕是 idk,例如 Screen1。假设用户在 Screen1 上点击了OK,这会将他们带到Screen2。 我目前正在
我是一名优秀的程序员,十分优秀!