Question

我想实现粘贴式弹出窗口，点击停留在屏幕左侧的图标即可打开，其位置将固定在屏幕上。下面添加了pop的示例图片。

它将是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

试试这个：

Fiddle 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>

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

粘性弹出式实施

2 个答案: