Created
December 9, 2018 15:01
-
-
Save chriskyfung/61f8e57b349cae852595e6b4923a1a48 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#myBtn { | |
height: 100%; | |
} | |
.modal { | |
display: none; | |
position: fixed; | |
top: 0px; | |
left: 0; | |
width:100%; | |
height: 100%; | |
z-index: 1; | |
background-color: rgba(0,0,0,0.4); | |
} | |
/* Modal Content */ | |
.modal-content { background-color: #fefefe; | |
margin: 10% auto; | |
padding: 20px; | |
border: 1px solid #888; | |
max-width: 400px; | |
} | |
.modal-content ::selection { | |
background-color: #39f !important; | |
color:white !important; | |
} | |
.modal-content button { | |
border: none;background: #555;color: white; | |
float:right; | |
padding: 16px 20px; | |
width: 120px; | |
opacity: 0.8; | |
} | |
.modal-content button:hover { | |
opacity: 1.0; | |
} | |
.modal-content button:disabled{ | |
background: #ccc;opacity: 1.0; | |
} | |
.modal-content h1 { | |
font-size: xx-large; | |
margin-bottom: 20px; | |
} | |
/* The Close Button */ | |
.close { | |
color: #aaaaaa; | |
float: right; | |
font-size: 28px; | |
font-weight: bold; | |
} | |
.close:hover, .close:focus { | |
color: #000; | |
text-decoration: none; | |
cursor: pointer;} | |
textarea { | |
width:99%; | |
margin:10px auto; | |
border:1px solid #ccc; | |
border-radius:4px; | |
resize: vertical; | |
} | |
.modal-content .lastrow { | |
height:50px; | |
} | |
#invalid-dialog { | |
position:absolute; | |
top:5px; | |
margin: 10% auto; | |
color:red; | |
} | |
#validate-dialog { | |
position:absolute; | |
top:26px; | |
margin: 10% auto; | |
color:green; | |
} | |
.popup { | |
display: inline-block; | |
cursor: pointer; | |
user-select: none; | |
} | |
.popup .popuptext { | |
visibility: hidden; | |
width:80px; | |
background-color: #555; | |
color: #fff; | |
text-align: center; | |
border-radius: 6px; | |
padding: 8px 0; | |
position: absolute; | |
z-index: 1; | |
top: 80%; | |
right: 145px; | |
margin-left: -40px; | |
} | |
.popup .show { | |
visibility: visible; | |
-webkit-animation: fadeIn 1s; | |
animation: fadeIn 1s; | |
}; | |
@-webkit-keyframes fadeIn { | |
from {opacity: 0;} to {opacity: 1;} | |
} | |
@keyframes fadeIn { | |
from {opacity: 0;} to {opacity:1 ;} | |
} | |
.popup .popuptext::after { | |
content: ''; | |
position: absolute; | |
top: -10px; | |
left: 50%; | |
margin-left: -5px; | |
border-width: 5px; | |
border-style: solid; | |
border-color: transparent transparent #555 transparent; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment