html - 如何使用javascript单击按钮/图标弹出一个窗口

我做了一个聊天机器人，现在我已经将其托管在本地服务器上。



我想将其嵌入到我的网站中，所以我真正想要的是一个像按钮/图标一样悬停在网站右下侧的东西，就像这个例子一样。



然后单击它，将在网站上弹出打开一个聊天机器人窗口。我应该如何进行

最佳答案

基本上，您将拥有两件事，弹出窗口和触发器：

<div class="popup">
   ... Popup Stuff
</div>
<button>Click Me</button>

如果弹出式窗口托管在您所在的页面之外，则可以在弹出式窗口中使用iframe进行渲染：

<div class="popup">
   <iframe src="http://wherever"/>
</div>
<button>Click Me</button>

您希望按钮切换弹出窗口的显示状态

const button = document.querySelector('button');
const popup = document.querySelector('.popup');

button.addEventListener('click', ()=>{
  popup.style.display === 'none' ? popup.style.display = 'block' : popup.style.display = 'none';
})

关于html - 如何使用javascript单击按钮/图标弹出一个窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54358890/