(9 intermediate revisions by the same user not shown) | |||
Line 11: | Line 11: | ||
#fitscoring:hover {opacity: 0.7;} | #fitscoring:hover {opacity: 0.7;} | ||
#Distribution:hover {opacity: 0.7;} | #Distribution:hover {opacity: 0.7;} | ||
+ | |||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 90; /* Sit on top */ | ||
+ | padding-top: 50px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content (Image) */ | ||
+ | .modal-content { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 90%; | ||
+ | max-width: 1366px; | ||
+ | } | ||
+ | |||
+ | /* Caption of Modal Image (Image Text) - Same Width as the Image */ | ||
+ | .caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 90%; | ||
+ | max-width: 1366px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation - Zoom in the Modal */ | ||
+ | .modal-content { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform:scale(0)} | ||
+ | to {-webkit-transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform:scale(0)} | ||
+ | to {transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* 100% Image Width on Smaller Screens */ | ||
+ | @media only screen and (max-width: 700px){ | ||
+ | .modal-content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
Line 79: | Line 158: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 148: | Line 223: | ||
} | } | ||
− | + | ||
− | $( document ).ready(function() { | + | $( document ).ready(function() { |
− | + | $("#System1C").show(); | |
− | + | $("#System1D").show(); | |
− | }); | + | }); |
− | + | ||
− | $(function() { | + | $(function() { |
− | $('#fitscoring').on('click', function() { | + | $('#fitscoring').on('click', function() { |
− | + | $('#fitscoring-Modal').toggle(); | |
− | + | }); | |
− | + | ||
− | $('#Distribution').on('click', function() { | + | $('#fitscoring-Modal').on('click', function() { |
− | + | $('#fitscoring-Modal').toggle(); | |
− | }); | + | }); |
+ | |||
+ | $('#Distribution').on('click', function() { | ||
+ | $('#Distribution-Modal').toggle(); | ||
+ | }); | ||
+ | $('#Distribution-Modal').on('click', function() { | ||
+ | $('#Distribution-Modal').toggle(); | ||
+ | }); | ||
}); | }); | ||
Latest revision as of 04:04, 19 November 2017