如何使Skype像悬浮窗一样？

Question

enter image description here我想设计像浮动窗口一样的Skype。 在网站左侧，它会像浮动窗口（Skype调用窗口）一样弹出。 如何做到这一点？有什么帮助。

像这样

Answer 1

我不知道我是否正确理解了您，因为您的问题有点……简短而又不清楚-但是，如果我说对了，您需要一个模态/弹出窗口的div元素。

您可以尝试创建一个div元素并使用

对其进行样式设置

position: absolute; // pos absolute so the element can float on top
top: 50%; // put it in the middle of the screen
left: 0; 
transform: translateY(-50%) translateX(-OFFSETpx); // hide it by making it go out of the window
transition: transform 0.5s ease-in-out; 
width: your-width;
height: your-height;

您可以通过使父级隐藏其上溢-overflow: hidden来隐藏div。 偏移值应足够高以使div不可见。现在，您可以使用JS添加和删除转换值分别为translate(-50%, -50%)和left: 50%的类，这些类将使div居中。