POPUP跳出窗口的UI模板

点击小圆点后扩大成跳出窗口形状

模板

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2884
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* mdl - popup */

.dark-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
    -webkit-transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
    transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
}
.fab {
    z-index: 5;
    cursor: pointer;
    border-radius: 50%;
    position: fixed;
    right: 400px;
    top: 100px;
    color: #fff;
    background: #d35400;
    height: 56px;
    width: 56px;
    box-shadow: 0 5px 5px rgba(126, 111, 111, 0.39);
    -webkit-transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
    transition: all 600ms cubic-bezier(0.200, 0.965, 0.000, 1.005);
}
.fab.active {
    cursor: default;
    background: #FFF;
    border-radius: .125em;
    width: 450px;
    height: 350px;
    box-shadow: 0 25px 35px 0 rgba(0, 0, 0, 0.35);
    top: 10%;
    right: calc(50% - 250px);
}
.fab-icon {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-12px, -12px);
    -ms-transform: translate(-12px, -12px);
    transform: translate(-12px, -12px);
    line-height: 24px;
    width: 24px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.active .fab-icon {
    display: none;
}
.active .protect {
    background: none;
}
.cntt-wrapper {
    display: none;
}
.active .cntt-wrapper {
    display: block;
}
#fab-hdr {
    position: absolute;
    width: 100%;
    background: #d35400;
}
#fab-hdr h3 {
    padding-left: 30px;
}
.cntt {
    padding: 100px 35px 0 35px;
    color: #757575;
}
.btn-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: 8px;
    padding: 6px 16px;
}
/* just presenation */

.center {
    margin: 0 auto
}
.m-t-100 {
    margin-top: 100px
}
.box {
    height: 300px;
    padding: 100px;
}

HTML

<form class='cntt-wrapper'>
        <div id="fab-hdr">
            <h3>Popup</h3>
        </div>

<div class="btn-wrapper">
            <button class="mdl-button mdl-js-button" id="cancel">Cancel</button>
            <button class="mdl-button mdl-js-button mdl-button--primary" id="submit">Submit</button>
        </div>

</form>
</div>

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--5-col mdl-cell--12-col-tablet mdl-shadow--2dp center m-t-100">
        <div class="box">
            <h1>Material Popup</h1>
            <h4>Just click the fancy button to see the magic</h4>
            <br>
            <p>This example uses the MDL-Libary for the CSS layout,
                <br/> the popup itself works it just fine without.</p>
        </div>
    </div>

点击小圆点后扩大成跳出窗口形状

模板

编辑器支持Emmet

快捷键

点击小圆点后扩大成跳出窗口形状

模板

注册/登陆窗口UI模板

带悬停特效的浮动瓷砖型导航UI模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：