粘性弹出式实施[关闭]答案

【问题标题】：Sticky Pop-up Implementation [closed]粘性弹出式实施[关闭]
【发布时间】：2018-01-11 06:30:29
【问题描述】：

我想实现一个粘性弹出窗口，它会在点击屏幕左侧的图标时打开，它的位置将固定在屏幕上。下面添加了 pop 的示例图像。

enter image description here

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

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

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

【问题讨论】：

欢迎来到 StackOVerflow。 StackOverflow 的目的是帮助有特定代码问题的开发人员，而不是推荐插件。

标签： jquery asp.net plugins popup

【解决方案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>

【讨论】：

我们可以用按钮从左到右滑动它，一旦弹出窗口打开，按钮文本会改变吗？
我不确定你的意思。对于您希望它从屏幕左侧滑动并显示的内容？关于按钮，它不是按钮。它是一个可以根据需要转换为按钮的 div。

【解决方案2】：

试试这个：

FiddleDemo

$('.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>

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

【讨论】：