自适应模态弹出层
代码语言:html
所属分类:弹出层
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Responsive Modal Design</title> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <meta name="viewport" content="width=device-width"> <style> * { box-sizing: border-box; } body { line-height: 1.5; font-family: 'Lato'; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p { font-weight: 300; margin: 0 0 2.4rem 0; } h1, h2, h3 { line-height: 1.3; } a { text-decoration: none; color: inherit; font-weight: 400; } /** * Material Modal CSS */ .modal { will-change: visibility, opacity; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 1000; visibility: hidden; opacity: 0; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: $modal-delay; } .modal--active { visibility: visible; opacity: 1; } .modal--align-top { align-items: flex-start; } .modal__bg { background: transparent; } .modal__dialog { max-width: 600px; padding: 1.2rem; } .modal__content { will-change: transform, opacity; position: relative; padding: 2.4rem; background: #ffebee; background-clip: padding-box; box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); opacity: 0; transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1); } .modal__content--active { opacity: 1; } .modal__close { z-index: 1100; cursor: pointer; } .modal__trigger { position: relative; display: inline-block; padding: 1.2rem 2.4rem; color: rgba(0,0,0,0.7); line-height: 1; cursor: pointer; background: #ffebee; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26); -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .modal__trigger--active { z-index: 10; } .modal__trigger:hover { background: #e5d3d6; } #modal__temp { will-change: transform, opacity; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ffebee; -webkit-transform: none; transform: none; opacity: 1; transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } /** * Demo specific CSS */ body { height: 100vh; background: #f44336; } img { max-width: 100%; } .demo-btns header { padding: 7vh 10vw; background: #ffebee; display: flex; align-items: center; } .demo-btns header h1 { margin: 0; color: rgba(0,0,0,0.54); font-weight: 300; } .demo-btns .info { background: #f44336; padding: 3vh 10vw; height: 70vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; } .demo-btns p { text-align: center; color: #fff; } .demo-btns .link { font-size: 20px; } .demo-btns .modal__trigger { margin-right: 3px; } @media (max-width: 640px) { .demo-btns .modal__trigger { margin-bottom: 0.8rem; } } .demo-close { position: absolute; top: 0; right: 0; margin: 1.2rem; padding: 0.6rem; background: rgba(0,0,0,0.3); border-radius: 50%; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .demo-close svg { width: 24px; fill: #fff; pointer-events: none; vertical-align: top; } .demo-close:hover { background: rgba(0,0,0,0.6); } .logo { position: fixed; bottom: 3vh; right: 3vw; z-index: 2; } .logo img { width: 45px; -webkit-transform: rotate(0); transform: rotate(0); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .logo img:hover { -webkit-transform: rotate(180deg) scale(1.1); transform: rotate(180deg) scale(1.1); } </style> </head> <body translate="no"> <div class="demo-btns"> <header> <h1>Material Design Modals</h1> </header> <div class="info"> <div class="buttons"> <p> <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> <a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a> <a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a> </p> </div> <p>Click a button to activate a modal.<br><a href="http://ettrics.com/code/material-design-modal/" target="_blank" class="link">Read the how-to on Ettrics.com</a></p> </div> </div> <div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal</h1> <p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi. Normcore chambray locavore Banksy, YOLO meditation master cleanse readymade Bushwick.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z" /><path d="M0 0h24v24h-24z" fill="none" /></svg> </a> </div> </div> </div> <div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Big Modal</h1> <h3>This modal is pretty tall.</h3> <p>Selfies normcore four dollar toast four loko listicle artisan. Hoodie Marfa authentic, wayfarers church-key tofu Banksy pop-up Kickstarter Brooklyn heirloom swag synth. Echo Park cray synth mixtape. Tofu gastropub squid readymade, trust fund Wes Anderson DIY PBR 8-bit try-hard +1 Shoreditch lo-fi tote bag.</p> <p><img src="http://unsplash.it/600/300" alt="" /></p> <p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p> <p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p> <a href="" class="modal__close demo-close"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z" /><path d="M0 0h24v24h-24z" fill="none" /></svg> </a> </div> </div> </div> <div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true"> <div class="modal__dialog"> <div class="modal__content"> <h1>Modal 3</h1> <p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0