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

Question

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

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

点击它时，它应该会在网站上弹出一个聊天机器人窗口。我应该如何进行此操作

Answer 1

基本上您将拥有两个东西，弹出窗口和触发器:

<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';
})