You are here

Home » API reference » Modal 5.0.x

modal-page.css in Modal 5.0.x

Same filename and directory in other branches
  1. 8.3 css/modal-page.css
  2. 8 css/modal-page.css
  3. 8.2 css/modal-page.css
  4. 4.0.x css/modal-page.css
  5. 4.1.x css/modal-page.css
.modal {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.modal:before,
.modal:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h4,
.h4 {
  font-size: 18px;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.js-modal-page-ok-buttom {
  float: right;
}
.modal-page-please-do-not-show-again {
  margin-right: 5px;
}
.modal-dont-show-again-label {
  display: inline;
  font-weight: normal;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: left;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

.modal-footer:after {
  display: table;
  content: " ";
}
.modal-header:after,
.modal-footer:after {
  clear: both;
}

File

css/modal-page.css
View source 
  1. .modal {

  2.   -webkit-box-sizing: border-box;

  3.   -moz-box-sizing: border-box;

  4.   box-sizing: border-box;

  5. }

  6. 

  7. .modal:before,

  8. .modal:after {

  9.   -webkit-box-sizing: border-box;

  10.   -moz-box-sizing: border-box;

  11.   box-sizing: border-box;

  12. }

  13. 

  14. h4,

  15. .h4 {

  16.   font-size: 18px;

  17. }

  18. 

  19. .btn {

  20.   display: inline-block;

  21.   padding: 6px 12px;

  22.   margin-bottom: 0;

  23.   font-size: 14px;

  24.   font-weight: normal;

  25.   line-height: 1.42857143;

  26.   text-align: center;

  27.   white-space: nowrap;

  28.   vertical-align: middle;

  29.   -ms-touch-action: manipulation;

  30.   touch-action: manipulation;

  31.   cursor: pointer;

  32.   -webkit-user-select: none;

  33.   -moz-user-select: none;

  34.   -ms-user-select: none;

  35.   user-select: none;

  36.   background-image: none;

  37.   border: 1px solid transparent;

  38.   border-radius: 4px;

  39. }

  40. .btn:focus,

  41. .btn:active:focus,

  42. .btn.active:focus,

  43. .btn.focus,

  44. .btn:active.focus,

  45. .btn.active.focus {

  46.   outline: 5px auto -webkit-focus-ring-color;

  47.   outline-offset: -2px;

  48. }

  49. .btn:hover,

  50. .btn:focus,

  51. .btn.focus {

  52.   color: #333;

  53.   text-decoration: none;

  54. }

  55. .btn:active,

  56. .btn.active {

  57.   background-image: none;

  58.   outline: 0;

  59.   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

  60.   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

  61. }

  62. 

  63. a.btn.disabled,

  64. fieldset[disabled] a.btn {

  65.   pointer-events: none;

  66. }

  67. .btn-default {

  68.   color: #333;

  69.   background-color: #fff;

  70.   border-color: #ccc;

  71. }

  72. .btn-default:focus,

  73. .btn-default.focus {

  74.   color: #333;

  75.   background-color: #e6e6e6;

  76.   border-color: #8c8c8c;

  77. }

  78. .btn-default:hover {

  79.   color: #333;

  80.   background-color: #e6e6e6;

  81.   border-color: #adadad;

  82. }

  83. .btn-default:active,

  84. .btn-default.active,

  85. .open > .dropdown-toggle.btn-default {

  86.   color: #333;

  87.   background-color: #e6e6e6;

  88.   border-color: #adadad;

  89. }

  90. 

  91. .close {

  92.   float: right;

  93.   font-size: 21px;

  94.   font-weight: bold;

  95.   line-height: 1;

  96.   color: #000;

  97.   text-shadow: 0 1px 0 #fff;

  98.   filter: alpha(opacity=20);

  99.   opacity: .2;

  100. }

  101. .close:hover,

  102. .close:focus {

  103.   color: #000;

  104.   text-decoration: none;

  105.   cursor: pointer;

  106.   filter: alpha(opacity=50);

  107.   opacity: .5;

  108. }

  109. button.close {

  110.   -webkit-appearance: none;

  111.   padding: 0;

  112.   cursor: pointer;

  113.   background: transparent;

  114.   border: 0;

  115. }

  116. .modal-open {

  117.   overflow: hidden;

  118. }

  119. .modal {

  120.   position: fixed;

  121.   top: 0;

  122.   right: 0;

  123.   bottom: 0;

  124.   left: 0;

  125.   z-index: 1050;

  126.   display: none;

  127.   overflow: hidden;

  128.   -webkit-overflow-scrolling: touch;

  129.   outline: 0;

  130. }

  131. 

  132. .js-modal-page-ok-buttom {

  133.   float: right;

  134. }

  135. .modal-page-please-do-not-show-again {

  136.   margin-right: 5px;

  137. }

  138. .modal-dont-show-again-label {

  139.   display: inline;

  140.   font-weight: normal;

  141. }

  142. .modal.fade .modal-dialog {

  143.   -webkit-transition: -webkit-transform .3s ease-out;

  144.   -o-transition: -o-transform .3s ease-out;

  145.   transition: transform .3s ease-out;

  146.   -webkit-transform: translate(0, -25%);

  147.   -ms-transform: translate(0, -25%);

  148.   -o-transform: translate(0, -25%);

  149.   transform: translate(0, -25%);

  150. }

  151. .modal.in .modal-dialog {

  152.   -webkit-transform: translate(0, 0);

  153.   -ms-transform: translate(0, 0);

  154.   -o-transform: translate(0, 0);

  155.   transform: translate(0, 0);

  156. }

  157. .modal-open .modal {

  158.   overflow-x: hidden;

  159.   overflow-y: auto;

  160. }

  161. .modal-dialog {

  162.   position: relative;

  163.   width: auto;

  164.   margin: 10px;

  165. }

  166. .modal-content {

  167.   position: relative;

  168.   background-color: #fff;

  169.   -webkit-background-clip: padding-box;

  170.   background-clip: padding-box;

  171.   border: 1px solid #999;

  172.   border: 1px solid rgba(0, 0, 0, .2);

  173.   border-radius: 6px;

  174.   outline: 0;

  175.   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

  176.   box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

  177. }

  178. .modal-backdrop {

  179.   position: fixed;

  180.   top: 0;

  181.   right: 0;

  182.   bottom: 0;

  183.   left: 0;

  184.   z-index: 1040;

  185.   background-color: #000;

  186. }

  187. .modal-backdrop.fade {

  188.   filter: alpha(opacity=0);

  189.   opacity: 0;

  190. }

  191. .modal-backdrop.in {

  192.   filter: alpha(opacity=50);

  193.   opacity: .5;

  194. }

  195. .modal-header {

  196.   padding: 15px;

  197.   border-bottom: 1px solid #e5e5e5;

  198. }

  199. .modal-header .close {

  200.   margin-top: -2px;

  201. }

  202. .modal-title {

  203.   margin: 0;

  204.   line-height: 1.42857143;

  205. }

  206. .modal-body {

  207.   position: relative;

  208.   padding: 15px;

  209. }

  210. .modal-footer {

  211.   padding: 15px;

  212.   text-align: left;

  213.   border-top: 1px solid #e5e5e5;

  214. }

  215. .modal-footer .btn + .btn {

  216.   margin-bottom: 0;

  217.   margin-left: 5px;

  218. }

  219. .modal-footer .btn-group .btn + .btn {

  220.   margin-left: -1px;

  221. }

  222. .modal-footer .btn-block + .btn-block {

  223.   margin-left: 0;

  224. }

  225. .modal-scrollbar-measure {

  226.   position: absolute;

  227.   top: -9999px;

  228.   width: 50px;

  229.   height: 50px;

  230.   overflow: scroll;

  231. }

  232. @media (min-width: 768px) {

  233.   .modal-dialog {

  234.     width: 600px;

  235.     margin: 30px auto;

  236.   }

  237.   .modal-content {

  238.     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);

  239.     box-shadow: 0 5px 15px rgba(0, 0, 0, .5);

  240.   }

  241.   .modal-sm {

  242.     width: 300px;

  243.   }

  244. }

  245. @media (min-width: 992px) {

  246.   .modal-lg {

  247.     width: 900px;

  248.   }

  249. }

  250. 

  251. .modal-footer:after {

  252.   display: table;

  253.   content: " ";

  254. }

  255. .modal-header:after,

  256. .modal-footer:after {

  257.   clear: both;

  258. }