粘性弹出窗口实现

Question

我想实现粘性弹出窗口，该弹出窗口将在单击粘在屏幕左侧的图标时打开，其位置将固定在屏幕上。下面添加了流行音乐的示例图像。

在此处输入图像描述

它将是 asp.net 中的一个控件，我想使用 jquery 实现它。

我

搜索了可以用来实现这个粘性弹出窗口的插件，但我没有得到我想要的。

因此，如果有人知道它的任何插件或任何示例代码，请分享它。

Answer 1

你不需要插件来实现它。下面是此类方案的示例。

$(function() {
    $("#MyButton").click(function() {
        $("#Contents").toggle();
    });
});

#MyButton {
  width: 100px;
  height: 50px;
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: lightgray;
}
#Contents {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 120px;
    background-color: lightgray;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyButton">Click Here</div>
<div id="Contents">
    Contents
</div>

Answer 2

试试这个：

小提琴Demo

$('.icon').click(function() {
  $('.popup').toggleClass('show');
});

.body {
  height: 500px;
  position: relative;
  background-color: #EEE;
}
.icon {
  position: fixed;
  left: 0;
  bottom: 10px;
  z-index: 3;
}
.popup {
  z-index: 2;
  background-color: #cccccc33;
  position: fixed;
  visibility: hidden;
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.5s ease-in-out;
}
.popup.show {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <button class="icon">
icon
</button>
  <div class="popup">
    <img src="https://i.stack.imgur.com/x9lgg.png" width="450">
  </div>
</div>

希望这可能会有所帮助!!