如何在弹出框中构建幻灯片

问题描述：

我想知道如何让CSS框进入框架 - 请参阅当前代码链接以获取更多详细信息。

例如，

我希望盒子从中间右侧滑入页面 - 我需要操作哪个属性才能实现上述预期输出。

当前代码：

https://jsfiddle.net/miss / 16vo1o58 / 6 /

非常感谢任何进一步的帮助。非常感谢。

I would like to know how I can make the CSS box come into the frame – please see the current code link for further details.

For example,
I would like the box to slide in from the right hand side in the middle of page – which property would I need to manipulate in order to achieve the above expected output.

Current code:
https://jsfiddle.net/miss/16vo1o58/6/

Any further assistance would be very much appreciated. Many thanks.

答

<div class="box">
  <p>Did you call me ?</p>
</div>

<a href="#">Call the Box</a>

body{
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

.box{
  position: fixed;
  width: 200px;
  height: 200px;
  right: -200px;
  background-color: #fff;
  box-shadow: 1px 1px 5px #ccc;
  transition: all 1s ease;
}

.called-box{
  right: 40%;
}

.box p{
  text-align: center;
  margin: 80px auto;
  font-size: 18px;
  color: #555;
}

a{
  color: #222;
  text-decoration: none;
  font-size: 22px;
  font-weight: 300;
  padding: 5px 15px;
  border: dotted 1px #555;
}

（ a）。click（function（e）{
e.preventDefault（）;

("a").click(function(e) { e.preventDefault();

（。box）。toggleClass（ call-box）;
}）;

(".box").toggleClass("called-box"); });

刚刚在这里创建了一个实例： http://liveweave.com/Kq4kra [ ^ ]

-KR

Just created a live example here: http://liveweave.com/Kq4kra[^]

-KR

如何在弹出框中构建幻灯片

相关推荐