Line 15: | Line 15: | ||
<link href="https://2018.igem.org/Template:UESTC-China/CSS/component?action=raw&ctype=text/css"> | <link href="https://2018.igem.org/Template:UESTC-China/CSS/component?action=raw&ctype=text/css"> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | .md-perspective, | ||
+ | .md-perspective body { | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .md-perspective body { | ||
+ | background: #fff; | ||
+ | -webkit-perspective: 600px; | ||
+ | -moz-perspective: 600px; | ||
+ | perspective: 600px; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | min-height: 100%; | ||
+ | } | ||
+ | |||
+ | .md-modal { | ||
+ | position: fixed; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | width: 50%; | ||
+ | max-width: 550px; | ||
+ | min-width: 320px; | ||
+ | height: auto; | ||
+ | z-index: 9999999; | ||
+ | visibility: hidden; | ||
+ | -webkit-transform: translateX(-50%) translateY(-50%); | ||
+ | -moz-transform: translateX(-50%) translateY(-50%); | ||
+ | -ms-transform: translateX(-50%) translateY(-50%); | ||
+ | transform: translateX(-50%) translateY(-50%); | ||
+ | } | ||
+ | |||
+ | .md-show { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .md-overlay { | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | visibility: hidden; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 9999995; | ||
+ | opacity: 0; | ||
+ | background: rgba(1,1,1,0.6); | ||
+ | -webkit-transition: all 0.3s; | ||
+ | -moz-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | } | ||
+ | |||
+ | .md-show ~ .md-overlay { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | /* Content styles */ | ||
+ | .md-content { | ||
+ | color: #5b5b5b; | ||
+ | background: #fff; | ||
+ | position: relative; | ||
+ | border-radius: 0px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | .md-content .md-close-btn { | ||
+ | position: absolute; | ||
+ | top: 10px; | ||
+ | right: 5px; | ||
+ | z-index: 999999; | ||
+ | } | ||
+ | .md-content .md-close-btn a{ | ||
+ | color: #909090; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .md-content .md-close-btn a:hover{ | ||
+ | color: #212121; | ||
+ | } | ||
+ | .md-content .md-close { | ||
+ | font-size: 13px; | ||
+ | } | ||
+ | |||
+ | .md-content h3 { | ||
+ | font-size: 16px; | ||
+ | font-weight: 600; | ||
+ | margin: 0; | ||
+ | padding: 20px; | ||
+ | text-align: center; | ||
+ | background: #fff; | ||
+ | border-radius: 0; | ||
+ | color: #797979; | ||
+ | } | ||
+ | |||
+ | .md-content > div { | ||
+ | padding: 15px 40px 30px; | ||
+ | margin: 0; | ||
+ | font-weight: 300; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | .md-content > div p { | ||
+ | margin: 0; | ||
+ | padding: 10px 0; | ||
+ | } | ||
+ | |||
+ | .md-content > div ul { | ||
+ | margin: 0; | ||
+ | padding: 0 0 30px 20px; | ||
+ | } | ||
+ | |||
+ | .md-content > div ul li { | ||
+ | padding: 5px 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Individual modal styles with animations/transitions */ | ||
+ | |||
+ | /* Effect 1: Fade in and scale up */ | ||
+ | .md-effect-1 .md-content { | ||
+ | -webkit-transform: scale(0.7); | ||
+ | -moz-transform: scale(0.7); | ||
+ | -ms-transform: scale(0.7); | ||
+ | transform: scale(0.7); | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.3s; | ||
+ | -moz-transition: all 0.3s; | ||
+ | transition: all 0.3s; | ||
+ | } | ||
+ | .md-show.md-effect-1 .md-content { | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
.hehe{ | .hehe{ |
Revision as of 07:35, 5 September 2018
Modal Dialog
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.
Copyright © 2018 iGEM UESTC_China