一个滑动，延迟然后自动滑出的弹出窗口

Question

我正在尝试创建一个弹出窗口，当用户执行某个操作时，它会从屏幕右下角滑入，停留几秒钟，然后滑出。我的代码 有问题 。这是我的 JS:

function showModal() {
  $('#sideModal').css('display', 'block').animate({
    width: '20%',
    display: 'block'
  }, {
    queue: false,
    duration: 1000
  }).delay(9000).animate({
    width: '0',
    display: 'none'
  }, {
    duration: 1000
  });
  //$('#sideModal').css('display', 'none');I commented this out because this prevents the div showing in the first place.
}

#sideModal {
    height: 75px;
    width: 0;
    position: fixed;
    bottom: 2%;
    left: 0;
    background: #000;
    z-index: 1000;
    display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container" style="margin-top:35px;">
<button class="btn btn-warning" onclick="showModal()">Click Me</button>
<div id="sideModal">
  I'm a sliding modal
</div>
</div>

div 可以正常滑入和滑出。但是，文本仍然存在。我该如何解决这个问题？

Answer 1

只需将 overflow:hidden 添加到模态框，这样如果模态框不可见，文本将不可见。

About overflow property

function showModal() {
  $('#sideModal').css('display', 'block').animate({
    width: '20%',
    display: 'block'
  }, {
    queue: false,
    duration: 1000
  }).delay(9000).animate({
    width: '0',
    display: 'none'
  }, {
    duration: 1000
  });
  //$('#sideModal').css('display', 'none');I commented this out because this prevents the div showing in the first place.
}

#sideModal {
    height: 75px;
    width: 0;
    position: fixed;
    bottom: 2%;
    left: 0;
    background: #000;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container" style="margin-top:35px;">
<button class="btn btn-warning" onclick="showModal()">Click Me</button>
<div id="sideModal">
  I'm a sliding modal
</div>
</div>

Answer 2

您需要将 overflow: hidden 添加到您的 #sideModal

function showModal() {
  $('#sideModal').css('display', 'block').animate({
    width: '20%',
    display: 'block'
  }, {
    queue: false,
    duration: 1000
  }).delay(9000).animate({
    width: '0',
    display: 'none'
  }, {
    duration: 1000
  });
  //$('#sideModal').css('display', 'none');I commented this out because this prevents the div showing in the first place.
}

#sideModal {
    height: 75px;
    width: 0;
    position: fixed;
    bottom: 2%;
    left: 0;
    background: #000;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container" style="margin-top:35px;">
<button class="btn btn-warning" onclick="showModal()">Click Me</button>
<div id="sideModal">
  I'm a sliding modal
</div>
</div>

Answer 3

如果你想让它从右边滑入，只需将 left: 0; 更改为 right: 0;，如下所示：

function showModal() {
  $('#sideModal').css('display', 'block').animate({
    right: '0%',
    display: 'block'
  }, {
    queue: false,
    duration: 1000
  }).delay(4000).animate({
    right: '-20%',
    display: 'none'
  }, {
    duration: 1000
  });
  //$('#sideModal').css('display', 'none');I commented this out because this prevents the div showing in the first place.
}

#sideModal {
    height: 75px;
    width: 20%;
    position: fixed;
    bottom: 2%;
    right: -20%;
    background: #000;
    z-index: 1000;
    display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container" style="margin-top:35px;">
<button class="btn btn-warning" onclick="showModal()">Click Me</button>
<div id="sideModal">
  I'm a sliding modal
</div>
</div>

编辑： 进行了一些更改，以便文本在模态 appears/disappears.

时不换行

希望对您有所帮助

一个滑动，延迟然后自动滑出的弹出窗口

A popup that slides, delays then slides out automatically

html

javascript

css

jquery

slide