jquery模拟IOS弹出提示效果

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="container">

  <hr>

  <a href="#" class="btn btn-large btn-success" target="_blank">Fork &amp; Download on GitHub</a>

  <h2>Examples</h2>

  The following all have a two second duration:

  <p class="container">

    <button id="loading" class="btn">Loading Spinner</button>

    <button id="checkMark" class="btn">Success</button>

    <button id="cross" class="btn">Error</button>

  <p class="spacer">&nbsp;

  It's possible to update a notification when it's already been added:

  <p class="container">

    <button id="loadToSuccess" class="btn">Loading Then Success</button>

</div>

4、书写css代码。

body > div.container { padding: 50px 0; position: relative; }

div.container iframe { position: absolute; top: 75px; right: 0; }

h2 { margin-top: 40px; font-size: 14px; text-transform: uppercase; }

p.spacer { height: 5px; overflow: hidden; }

footer { padding: 20px 0; position: relative; }

footer iframe { position: absolute; top: 20px; right: 0; }

table td:first-child { width: 125px; }

li strong { color: #111; }

.btn.btn-large { float: right; margin-top: 40px; }

5、代码整体结构。

6、查看效果。