hystmodal实现模态弹出层弹出框效果代码-html代码-BFW代码库

代码语言：html
所属分类：弹出层
代码描述：hystmodal实现模态弹出层弹出框效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/hystmodal.css"><script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hystmodal.min.js"></script>
    <style>
*{
	margin: 0;
	padding: 0;
	list-style: none;
    font-style: normal;
}
*:focus {
    outline: 2px dotted #afb3b9;
    outline-offset: 2px;
}
.container{
    max-width: 1200px;
    margin:0 auto;
}

html, body{
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #101721;
    background: #f9f9fb;
}
body{
    overflow-x: hidden;
    min-height: 2000px;
}
input, button, textarea, select{
    font-family: inherit;
}
a{
    text-decoration: none;
    color:#5089e9;
}
a:hover{
    color:#000;
}
.mshow{
    display: none;
}
.wrapper{
    display: block;
    overflow: hidden;
}
.flexi {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.hide{
    display: none;
}
input[type=submit],
button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.button{
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 15px 2px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    box-sizing: border-box;
    cursor: pointer;
    border:none;
    position: relative;

    background: none;
    border:1px solid #000;
    color: #000;
}
.button:hover{
    background-color: #000;
    color:#fff;
}
.button:active{
    top:1px;
}
.button:disabled{
    background: #ddd;
    border-color:#d5d5d5;
    color:#fff;
}




.scr3, .bluescr {
    background-color: #6b83a6;
    padding: 90px 0 60px;
}
.block-title--white {
    color:#fff;
}
.scr3__wrap {
    padding-top: 60px;
}
.demobuttons {
    display: flex;
    height: 50px;
    color:#fff;
    border-color:#fff;
    font-size: 14px;
    white-space: nowrap;
    margin: 0 15px 15px;
    min-width: 200px;
}
.demobuttons:hover{
    color:#6b83a6;
    background-color: #fff;   
}
.demobuttons--min{
    display: flex;
    color:#6b83a6;
    background-color: #fff;   
    margin: 60px auto 0;
    max-width: 240px;
}

.block-title {
    text-align: center;
    color: #fff;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 300;
}






.hystmodal__window{
    border-radius: 5px;
    padding: 30px 30px;
}




.hystmodal__styled{
    font-size: 16px;
    line-height: 1.5;
}
.hystmodal__styled p{
    margin-bottom: 0.8em;
}
.hystmodal__styled a{
    color:#6b83a6;
}
.hystmodal__styled .h1{
    font-size: 2em;
    margin-top: 15px;
    margin-bottom: 20px;
    color:#39537a;
}
.hystmodal__styled .h2{
    font-size: 1.8em;
    margin-top: 15px;
    margin-bottom: 20px;
    color:#39537a; 
}
.hystmodal__styled ul{
    margin-bottom: 0.8em;
}
.hystmodal__styled li{
    padding: 0.2em 0 0.2em 30px;
    position: relative;
    list-style: none;
}
.hystmodal__styled li:before{
    content:"";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #39537a;
    border-radius: 50%;
    top: 12px;
    left: 10px;
}
.hystmodal__styled img{
    display: block;
    margin-bottom: 0.8em;
    max-width: 100%;
}
.hystmodal__styled button{
    background-color: #000;
    color:#fff;
    border:none;
    font-weight: bold;
    margin:1em 0;
    padding: 10px 30px;

}
.hystmodal__styled a:hover{
    color:#39537a;
}


.hystmodal__window--long{
    width: 1000px;
}



.hystmodal--video .hystmodal__window{
    position: relative;
    width: 900px;
    padding: 0;
    height: 470px;
    box-sizing:content-box;
    background-color: #000;
    
}
.hystmodal--video iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border:none;
}












.hystmodal__window--form{
    width: 440px;
    max-width: 100%;
    background: linear-gradient(216.25deg, #FFFFFF 0%, #F3F3F3 100%), #FCFCFC;
    box-shadow: 0px 0px 6px rgba(51, 66, 94, 0.5);
    padding: 40px 30px;
}
.loginblock__h1{
    margin-bottom: 30px;
    color: #2E3C56;
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
}
.loginblock__h2{
    margin-top: 4px;
    color: #8F99AA;
    font-size: 14px;
    line-height: 21px;
}
.loginblock__form{
    padding-top: 36px;
}
.formitem{
    padding-bottom: 24px;
    position: relative;
}
.formitem input{
    outline: none;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 100px #fff;
    border: 1px solid #DDE0E6;
    box-sizing: border-box;
    color: #484c53;
    font-size: 15px;
    line-height: 26px;
    padding: 15px 20px;
    box-sizing: border-box;
    display: block;
    width: 100%;
}
.formitem input:focus{
    border-color:#9d9fa3;
}
.loginblock__bottom{
    justify-content: space-between;
    padding-bottom: 24px;
}
.formcheckbox{
    position: relative;
    display: block;
    cursor: pointer;
}
.formcheckbox input{
    position: absolute;
    /* visibility: hidden; */
    top:0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.formcheckbox:focus-within{
    outline: 2px dotted #afb3b9;
    outline-offset:2px;
}
.formcheckbox input+span{
    height: 21px;
    color: #8F99AA;
    font-size: 12px;
    line-height: 21px;
    position: relative;
    align-items: center;
    user-select: none;
}
.formcheckbox input:checked + span{
    color: #2E3C56;
}
.checkplace{
    display: flex;
    background: #FFFFFF;
    border: 1px solid #DDE0E6;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-right: 1rem;
}
.checkplace img{
    display: block;
    max-width: 90%;
    max-height: 95%;
    margin: auto;
    opacity: 0;
}
.formcheckbox input:checked + span .checkplace{
    border-color:#9d9fa3;
}
.formcheckbox input:checked + span .checkplace img{
    opacity: 1;
}
.loginblock__link{
    display: block;
    color:#2E3C56;
    font-size: 12px;
    line-height: 21px;
}
.formsubmit .button{
    width: 100%;
    height: 56px;
    font-weight: 500;
}








.fxied-el,
.fxied-el2{
    display: block;
    position: fixed;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    background-color: #2E3C56;
    color:#fff;
    font-size: 14px;
}
.fxied-el2{
    left: auto;
    top:auto;
    bottom: 30px;
    width: auto;
    padding: 10px;
    text-align: center;
    margin-right: 2rem;
    right: 30px;
}
    </style>
</head>
<body>    


    <div class="scr3">
        <div class="container">
            <div class="block-title block-title--white">HystModal Demo</div>
            <div class="scr3__wrap flexi">
                <button class="button demobuttons" data-hystmodal="#modalSimple">Simple windows</button>
                <button class="button demobuttons" data-hystmodal="#modalLong">Long text</button>
                <button class="button demobuttons" data-hystmodal="#modalForms">Modal Form</button>
                <button class="button demobuttons" data-hystmodal="#modalVideo">Modal Video</button>
            </div>
          
        </div>
    </div>
     




    <div class="hystmodal" id="modalSimple" aria-hidden="true">
        <div class="hystmodal__wrap">
            <div class="hystmodal__window" role="dialog" aria-modal="true">
                <button class="hystmodal__close" data-hystclose>Закрыть</button>
                <div class="hystmodal__styled">
                    <div class="h1">Website Overview</div>
                    <p>
                        Websites have many functions and can be used in various fashions; a website can be a personal website, a commercial website, a government website or a non-profit organization website. Websites can be the work of an individual, a business or other organization, and are typically dedicated to a particular topic or purpose.
                    </p>
                    <p>Any website can contain a hyperlink to any other website, so the distinction between individual sites, as perceived by the user, can be blurred. Websites are written in, or converted to, HTML (Hyper Text Markup Language) and are accessed using a software interface classifi.........完整代码请登录后点击上方下载按钮下载查看