基本上我在aframe中有一个模态窗口，我试图通过javascript添加一个关闭按钮但我无法弄明白。
链接到以下项目：
https://andrewmc1994.github.io/Image-Link-Test/
如果你突出显示指南针图标，你会看到我的意思。
这是一个大学项目，我在网上看了各种方法，但似乎没有一个工作，所以这就是我来这里的原因。
<a-entity ui-modal="triggerElement:#selection;" visible="false">
<a-image src="#submenu" scale="3.5 3.5 0" position="0 -0.25 2" src-fit></a-image>
<a-image position="-1 -0.25 2.1" class="clickable" src="#tqicon" scale="0.7 0.7 0" link="href:location1.html; on: click; visualAspectEnabled: false" src-fit></a-image>
<a-image position="0 -0.25 2.1" class="clickable" src="#acicon" scale="0.7 0.7 0" link="href:location3.html; on: click; visualAspectEnabled: false" src-fit></a-image>
<a-image position="1 -0.25 2.1" class="clickable" src="#bchicon" scale="0.7 0.7 0" link="href:location2.html; on: click; visualAspectEnabled: false" src-fit></a-image>
<a-image position="1.4 0 2.1" class="clickable" src="#close" scale="0.1 0.1 0" id="close" src-fit></a-image>
</a-entity>
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
/**
* UI modal component for A-Frame.
*/
if (typeof AFRAME === 'undefined') {
throw new Error('Component attempted to register before AFRAME was available.');
}
AFRAME.registerComponent('ui-modal', {
schema: {
trigger: {
default: 'click'
},
triggerElement: {
default: '',
},
zpos: {
default: -4
}
},
init: function() {
document.querySelector(this.data.triggerElement).addEventListener(this.data.trigger, this.eventHandler.bind(this));
this.cameraEl = document.querySelector('a-entity[camera]');
this.yaxis = new THREE.Vector3(0, 0, 0);
this.zaxis = new THREE.Vector3(0, 0, 0);
this.pivot = new THREE.Object3D();
this.el.object3D.position.set(0, this.cameraEl.object3D.getWorldPosition().y, this.data.zpos);
this.el.sceneEl.object3D.add(this.pivot);
this.pivot.add(this.el.object3D);
},
eventHandler: function(evt) {
if (this.el.getAttribute('visible') === false) {
var direction = this.zaxis.clone();
direction.applyQuaternion(this.cameraEl.object3D.quaternion);
var ycomponent = this.yaxis.clone().multiplyScalar(direction.dot(this.yaxis));
direction.sub(ycomponent);
direction.normalize();
this.pivot.quaternion.setFromUnitVectors(this.zaxis, direction);
this.pivot.position.copy(this.cameraEl.object3D.getWorldPosition());
this.el.setAttribute('visible', true);
} else if (this.el.getAttribute('visible') === true) {
this.el.setAttribute('visible', false);
}
},
update: function (oldData) {},
remove: function() {}
});
/***/ }
/******/ ]);
所以预期的结果是用户打开模态窗口，然后能够用一个简单的按钮关闭它。
任何帮助是极大的赞赏。
您只需要向现有关闭按钮添加任何功能。你的eventHandler已经包含显示/隐藏UI的逻辑，所以只需在关闭按钮中添加一个监听器：
let closeBtn = document.getElementById("close") one close button
closeBtn.addEventListener(this.data.trigger, this.eventHandler.bind(this))
单击时 - 它将隐藏UI。
然而，有更多的元素与ui-modal组件，他们的eventHandler触发setAttribute("visible", "")部分。
解决这个问题的最简单方法是
closeBtn.addEventListener(this.data.trigger, e => {
this.el.setAttribute("visible", "false")
})
让关闭按钮隐藏元素，这里不需要做任何事情。
这是有效的：
if (this.el.getAttribute("visible") {
// hide
} else {
// show
}
以及：
// toggle visibility
this.el.setAttribute("visible", !this.el.getAttribute("visible")
你可以在this小提琴中查看。
很难调试你的问题，但有一件事对我来说“不对”！
您的事件处理程序将this.el.getAttribute('visible')与true和false作为布尔值进行验证，但getAttribute将始终返回一个字符串（在此特定情况下将为'true'和'false'）或null（如果该属性不存在）。
所以你应该在eventHandler部分验证这样：
if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false
/* ... */
this.el.setAttribute('visible', 'true'); // set to 'true' instead of true
} else if ( this.el.getAttribute('visible') === 'true' ) { // validate against 'true' instead of true
/* ... */
this.el.setAttribute('visible', 'false'); // set to 'false' instead of false
}
但经过进一步检查后，我注意到实际上A-Frame（工作）似乎没有将attributeName visible的elements attributeValue设置为"true"|"false"。
相反，如果一个元素是可见的，它设置为visible=""，如果它不可见，则设置为visible="false"。所以只有这是真的，你应该这样做：
if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false
/* ... */
this.el.setAttribute('visible', ''); // set to '' instead of true
} else if ( this.el.getAttribute('visible') === '' ) { // validate against '' instead of false
/* ... */
this.el.setAttribute('visible', 'false'); // set to 'false' instead of false
}