Question

我正在尝试关闭弹出窗口。我只能在我的javascript文件中执行此操作。我在处理它时遇到问题，但无法正常工作。这是我的代码。我的弹出窗口有效，没有关闭按钮功能。

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  
  <!--renders the code I wish to demo from vue data-->
  <span v-html="sampleCode"></span>
  
  <!--renders the textarea that will allow users to easily copy the code-->
  <copycode></copycode>

</div>

Answer 1

var addbuttonclicked = document.querySelector('#sell-something-button');
addbuttonclicked.addEventListener('click', function(){
    document.getElementById("sell-something-modal").classList.remove('hidden');
    document.getElementById("modal-backdrop").classList.remove('hidden');
});

//When close is clicked this window should be closed
var closebutton = document.querySelector('#close-modal');
closebutton.addEventListener('click', function(){
    document.getElementById("sell-something-modal").classList.add('hidden');
    document.getElementById("modal-backdrop").classList.add('hidden');
}

Answer 2

只需再次将其标记为隐藏即可。

var addbuttonclicked = document.querySelector('#sell-something-button');
    addbuttonclicked.addEventListener('click', function(){
        document.getElementById("sell-something-modal").classList.remove('hidden');
        document.getElementById("modal-backdrop").classList.remove('hidden');    
});

//When close is clicked this window should be closed
var closebutton = document.querySelector('#close-modal');
closebutton.addEventListener('click', function(){    
   document.getElementById("sell-something-modal").classList.add('hidden');
   document.getElementById("modal-backdrop").classList.add('hidden');
});

Java脚本关闭我的弹出窗口，单击按钮

2 个答案: