eulukasthyago
11/29/2019 - 1:56 PM

// source https://jsbin.com/furawot

// source https://jsbin.com/furawot

index.html
content_copyfile_download
<style id="jsbin-css">
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap');

small {
    font-size: 80%;
}

small {
    font-size: 80%;
    font-weight: 400;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input {
    overflow: visible;
}

textarea
{
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

textarea
{
    overflow: auto;
    resize: vertical;
}

/* Close Button */

.wc-close-button
{
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
}

/* Position */


/* Modal Background */
.wc-modal-background-fixed
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    -web-kit-backdrop-filter: blur(5px);
    z-index: 99999;
}

.wc-show-modal-background{
    display:flex;
}

/* Modal */

.wc-modal
{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: 500px;
    background: #fff;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    z-index: 99999;
}

.wc-modal.wc-show-modal
{
    display: block;
}

.wc-modal-header
{
    padding: 20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    border-radius: 10px 10px 0px 0px;
}

.wc-modal-header .wc-close-button
{
    font-size: 1.4rem;
    padding: 10px;
}

.wc-modal-body
{
    padding: 20px;
}

.wc-modal.wc-modal-sm{
    width: 300px;
}

.wc-modal.wc-modal-lg{
    width: 800px;
}

.wc-modal.wc-modal-xl{
    width: 800px;
}

.wc-modal-title
{
    font-weight: 700;
    font-size: 1.5rem;
}

.wc-modal-title h1,
.wc-modal-title h2,
.wc-modal-title h3,
.wc-modal-title h4,
.wc-modal-title h5
{
    margin: 0 !important;
}

.wc-modal-footer
{
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    background: #f2f2f2;
    border-radius: 0px 0px 10px 10px;
}

/* Shadow */

.wc-shadow-lg
{
    box-shadow: 0 20px 30px 5px rgba(0,0,0,0.3);
}

/* Buttons */

.wc-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .40rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .30rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0 .25rem;
}

@media (prefers-reduced-motion:reduce) {
    .wc-btn {
        transition: none;
    }
}

.wc-btn:hover {
    color: #212529;
    text-decoration: none;
}

.wc-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.wc-btn:disabled {
    opacity: .65;
}

.wc-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.wc-btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.wc-btn-primary:focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 .2rem rgba(38,143,255,.5);
}

.wc-btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.wc-btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.wc-btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.wc-btn-secondary:focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
}

.wc-btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.wc-btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.wc-btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.wc-btn-success:focus {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: 0 0 0 .2rem rgba(72,180,97,.5);
}

.wc-btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.wc-btn-danger{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}

.wc-btn-danger:hover{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130;
}

.wc-btn-danger:focus{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130;
    box-shadow:0 0 0 .2rem rgba(225,83,97,.5);
}

.wc-btn-danger:disabled{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}

.wc-btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.wc-btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}

.wc-btn-warning:focus {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222,170,12,.5);
}

.wc-btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.wc-btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.wc-btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.wc-btn-info:focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
}

.wc-btn-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.wc-btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.wc-btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.wc-btn-light:focus {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 .2rem rgba(216,217,219,.5);
}

.wc-btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.wc-btn-dark{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40;
}

.wc-btn-dark:hover{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124;
}

.wc-btn-dark:focus{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124;
    box-shadow:0 0 0 .2rem rgba(82,88,93,.5);
}

.wc-btn-dark:disabled{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40;
}

.wc-btn-link {
    font-weight: 400;
    color: #007bff;
    text-decoration: none;
}

.wc-btn-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wc-btn-link:focus {
    text-decoration: underline;
    box-shadow: none;
}

.wc-btn-link:disabled {
    color: #6c757d;
    pointer-events: none;
}

/* Form */

/* Form Group */

.wc-form-group
{
    margin-bottom: 1rem;
}


/* Form control */


/* input */

.wc-form-control
{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion:reduce) {
    .wc-form-control {
        transition: none;
    }
}

.wc-form-control::-ms-expand
{
    background-color: transparent;
    border: 0;
}

.wc-form-control:-moz-focusring
{
    color: transparent;
    text-shadow: 0 0 0 #495057;
}

.wc-form-control:focus
{
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.wc-form-control::-webkit-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::-moz-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control:-ms-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::-ms-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control:disabled
{
    background-color: #e9ecef;
    opacity: 1;
}

textarea.form-control
{
    min-height: 200px;
    height: auto;
}

/* input group */

.wc-input-group
{
    display: flex;
    align-items: center
}

/* input group prepend */

.wc-input-group-prepend
{
    padding: 10px;
    border: 1px solid #000;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.wc-form-text {
    display: block;
    margin-top: .25rem;
}

.wc-text-muted {
    color: #6c757d !important;
}
</style>
<button type="button" data-toggle="modal" data-target="meuModal" class="wc-btn wc-btn-dark">Abrir Modal</button>


<div class="wc-modal-background-fixed">
	<div id="meuModal" class="wc-modal wc-shadow-lg wc-w-25">
		<div class="wc-modal-header">
			<span class="wc-modal-title">
				Atualizar produto
			</span>
			<button type="button" class="wc-close-button">
				<span>&times;</span>
			</button>
		</div>
		<div class="wc-modal-body">
			<div class="wc-modal-content">
				<form action="" class="wc-form">
					<div class="wc-form-group">
						<label for="nameProduct">Nome do produto:</label>
						<input type="text" class="wc-form-control" id="nameProduct">
						<small class="wc-form-text wc-text-muted">Insira o nome do produtp</small>
						<!-- <div class="wc-input-group">
							<div class="wc-input-group-prepend">
								@
							</div>
							<input type="ext" class="wc-form-control" placeholder="Nome do produto">
						</div> -->
					</div>
					<div class="wc-form-group">
						<label for="productPrice">Valor do produto:</label>
						<input type="number" class="wc-form-control" id="productPrice">
						<small class="wc-form-text wc-text-muted">Inform o valor do produto</small>
					</div>
					<div class="wc-form-group">
						<label for="productStok">Estoque:</label>
						<input type="number" class="wc-form-control" id="productStok">
						<small class="wc-form-text wc-text-muted">Insira a quantidade de estique</small>
					</div>
					<div class="wc-form-group">
						<label for="exampleFormControlTextarea1">Example textarea</label>
						<textarea class="wc-form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
						<small class="wc-form-text wc-text-muted">Escreva uma descrição do produto</small>
					</div>
				</form>
			</div>
		</div>
		<div class="wc-modal-footer">
			<button type="button" class="wc-btn wc-btn-danger wc-btn-primary wc-close-modal">Cacelar</button>
			<button type="button" class="wc-btn wc-btn-dark wc-btn-primary">Atualizar</button>
		</div>
	</div>
</div>
<script id="jsbin-javascript">
"use strict";

window.addEventListener("load", function () {
	var $allBtnModal = document.querySelectorAll("[data-toggle='modal']");
	$allBtnModal.forEach(function (e, k) {
		var $modal = document.querySelector("#" + e.dataset.target);
		e.addEventListener("click", function () {
			$modal.classList.add("wc-show-modal");
			document.querySelector("body").style.overflow = "hidden";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.add("wc-show-modal-background");
			}
		});
		$modal.querySelector(".wc-close-button").addEventListener("click", function () {
			$modal.classList.remove("wc-show-modal");
			document.querySelector("body").style.overflow = "auto";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.remove("wc-show-modal-background");
			}
		});
		$modal.querySelector(".wc-close-modal").addEventListener("click", function () {
			$modal.classList.remove("wc-show-modal");
			document.querySelector("body").style.overflow = "auto";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.remove("wc-show-modal-background");
			}
		});
	});
});
</script>
<script id="jsbin-source-html" type="text/html"><button type="button" data-toggle="modal" data-target="meuModal" class="wc-btn wc-btn-dark">Abrir Modal</button>


<div class="wc-modal-background-fixed">
	<div id="meuModal" class="wc-modal wc-shadow-lg wc-w-25">
		<div class="wc-modal-header">
			<span class="wc-modal-title">
				Atualizar produto
			</span>
			<button type="button" class="wc-close-button">
				<span>&times;</span>
			</button>
		</div>
		<div class="wc-modal-body">
			<div class="wc-modal-content">
				<form action="" class="wc-form">
					<div class="wc-form-group">
						<label for="nameProduct">Nome do produto:</label>
						<input type="text" class="wc-form-control" id="nameProduct">
						<small class="wc-form-text wc-text-muted">Insira o nome do produtp</small>
						<\!-- <div class="wc-input-group">
							<div class="wc-input-group-prepend">
								@
							</div>
							<input type="ext" class="wc-form-control" placeholder="Nome do produto">
						</div> -->
					</div>
					<div class="wc-form-group">
						<label for="productPrice">Valor do produto:</label>
						<input type="number" class="wc-form-control" id="productPrice">
						<small class="wc-form-text wc-text-muted">Inform o valor do produto</small>
					</div>
					<div class="wc-form-group">
						<label for="productStok">Estoque:</label>
						<input type="number" class="wc-form-control" id="productStok">
						<small class="wc-form-text wc-text-muted">Insira a quantidade de estique</small>
					</div>
					<div class="wc-form-group">
						<label for="exampleFormControlTextarea1">Example textarea</label>
						<textarea class="wc-form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
						<small class="wc-form-text wc-text-muted">Escreva uma descrição do produto</small>
					</div>
				</form>
			</div>
		</div>
		<div class="wc-modal-footer">
			<button type="button" class="wc-btn wc-btn-danger wc-btn-primary wc-close-modal">Cacelar</button>
			<button type="button" class="wc-btn wc-btn-dark wc-btn-primary">Atualizar</button>
		</div>
	</div>
</div>
</script>

<script id="jsbin-source-css" type="text/css">@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap');

small {
    font-size: 80%;
}

small {
    font-size: 80%;
    font-weight: 400;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input {
    overflow: visible;
}

textarea
{
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

textarea
{
    overflow: auto;
    resize: vertical;
}

/* Close Button */

.wc-close-button
{
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
}

/* Position */


/* Modal Background */
.wc-modal-background-fixed
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    -web-kit-backdrop-filter: blur(5px);
    z-index: 99999;
}

.wc-show-modal-background{
    display:flex;
}

/* Modal */

.wc-modal
{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: 500px;
    background: #fff;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    z-index: 99999;
}

.wc-modal.wc-show-modal
{
    display: block;
}

.wc-modal-header
{
    padding: 20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    border-radius: 10px 10px 0px 0px;
}

.wc-modal-header .wc-close-button
{
    font-size: 1.4rem;
    padding: 10px;
}

.wc-modal-body
{
    padding: 20px;
}

.wc-modal.wc-modal-sm{
    width: 300px;
}

.wc-modal.wc-modal-lg{
    width: 800px;
}

.wc-modal.wc-modal-xl{
    width: 800px;
}

.wc-modal-title
{
    font-weight: 700;
    font-size: 1.5rem;
}

.wc-modal-title h1,
.wc-modal-title h2,
.wc-modal-title h3,
.wc-modal-title h4,
.wc-modal-title h5
{
    margin: 0 !important;
}

.wc-modal-footer
{
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    background: #f2f2f2;
    border-radius: 0px 0px 10px 10px;
}

/* Shadow */

.wc-shadow-lg
{
    box-shadow: 0 20px 30px 5px rgba(0,0,0,0.3);
}

/* Buttons */

.wc-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .40rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .30rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0 .25rem;
}

@media (prefers-reduced-motion:reduce) {
    .wc-btn {
        transition: none;
    }
}

.wc-btn:hover {
    color: #212529;
    text-decoration: none;
}

.wc-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.wc-btn:disabled {
    opacity: .65;
}

.wc-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.wc-btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.wc-btn-primary:focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 .2rem rgba(38,143,255,.5);
}

.wc-btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.wc-btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.wc-btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.wc-btn-secondary:focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
}

.wc-btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.wc-btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.wc-btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.wc-btn-success:focus {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: 0 0 0 .2rem rgba(72,180,97,.5);
}

.wc-btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.wc-btn-danger{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}

.wc-btn-danger:hover{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130;
}

.wc-btn-danger:focus{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130;
    box-shadow:0 0 0 .2rem rgba(225,83,97,.5);
}

.wc-btn-danger:disabled{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}

.wc-btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.wc-btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}

.wc-btn-warning:focus {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222,170,12,.5);
}

.wc-btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.wc-btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.wc-btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.wc-btn-info:focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
}

.wc-btn-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.wc-btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.wc-btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.wc-btn-light:focus {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 .2rem rgba(216,217,219,.5);
}

.wc-btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.wc-btn-dark{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40;
}

.wc-btn-dark:hover{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124;
}

.wc-btn-dark:focus{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124;
    box-shadow:0 0 0 .2rem rgba(82,88,93,.5);
}

.wc-btn-dark:disabled{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40;
}

.wc-btn-link {
    font-weight: 400;
    color: #007bff;
    text-decoration: none;
}

.wc-btn-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wc-btn-link:focus {
    text-decoration: underline;
    box-shadow: none;
}

.wc-btn-link:disabled {
    color: #6c757d;
    pointer-events: none;
}

/* Form */

/* Form Group */

.wc-form-group
{
    margin-bottom: 1rem;
}


/* Form control */


/* input */

.wc-form-control
{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion:reduce) {
    .wc-form-control {
        transition: none;
    }
}

.wc-form-control::-ms-expand
{
    background-color: transparent;
    border: 0;
}

.wc-form-control:-moz-focusring
{
    color: transparent;
    text-shadow: 0 0 0 #495057;
}

.wc-form-control:focus
{
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.wc-form-control::-webkit-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::-moz-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control:-ms-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::-ms-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control:disabled
{
    background-color: #e9ecef;
    opacity: 1;
}

textarea.form-control
{
    min-height: 200px;
    height: auto;
}

/* input group */

.wc-input-group
{
    display: flex;
    align-items: center
}

/* input group prepend */

.wc-input-group-prepend
{
    padding: 10px;
    border: 1px solid #000;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.wc-form-text {
    display: block;
    margin-top: .25rem;
}

.wc-text-muted {
    color: #6c757d !important;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">window.addEventListener("load", () => {
	const $allBtnModal = document.querySelectorAll("[data-toggle='modal']");
	$allBtnModal.forEach((e, k) => {
		const $modal = document.querySelector("#"+e.dataset.target);
		e.addEventListener("click", () => {
			$modal.classList.add("wc-show-modal");
			document.querySelector("body").style.overflow = "hidden";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.add("wc-show-modal-background");
			}
		});
		$modal.querySelector(".wc-close-button").addEventListener("click", () => {
			$modal.classList.remove("wc-show-modal");
			document.querySelector("body").style.overflow = "auto";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.remove("wc-show-modal-background");
			}
		});
		$modal.querySelector(".wc-close-modal").addEventListener("click", () => {
			$modal.classList.remove("wc-show-modal");
			document.querySelector("body").style.overflow = "auto";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.remove("wc-show-modal-background");
			}
		});
	});
});</script>
jsbin.furawot.css
content_copyfile_download
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap');

small {
    font-size: 80%;
}

small {
    font-size: 80%;
    font-weight: 400;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

input {
    overflow: visible;
}

textarea
{
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

textarea
{
    overflow: auto;
    resize: vertical;
}

/* Close Button */

.wc-close-button
{
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
}

/* Position */


/* Modal Background */
.wc-modal-background-fixed
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    -web-kit-backdrop-filter: blur(5px);
    z-index: 99999;
}

.wc-show-modal-background{
    display:flex;
}

/* Modal */

.wc-modal
{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: 500px;
    background: #fff;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    z-index: 99999;
}

.wc-modal.wc-show-modal
{
    display: block;
}

.wc-modal-header
{
    padding: 20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    border-radius: 10px 10px 0px 0px;
}

.wc-modal-header .wc-close-button
{
    font-size: 1.4rem;
    padding: 10px;
}

.wc-modal-body
{
    padding: 20px;
}

.wc-modal.wc-modal-sm{
    width: 300px;
}

.wc-modal.wc-modal-lg{
    width: 800px;
}

.wc-modal.wc-modal-xl{
    width: 800px;
}

.wc-modal-title
{
    font-weight: 700;
    font-size: 1.5rem;
}

.wc-modal-title h1,
.wc-modal-title h2,
.wc-modal-title h3,
.wc-modal-title h4,
.wc-modal-title h5
{
    margin: 0 !important;
}

.wc-modal-footer
{
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    background: #f2f2f2;
    border-radius: 0px 0px 10px 10px;
}

/* Shadow */

.wc-shadow-lg
{
    box-shadow: 0 20px 30px 5px rgba(0,0,0,0.3);
}

/* Buttons */

.wc-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .40rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .30rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0 .25rem;
}

@media (prefers-reduced-motion:reduce) {
    .wc-btn {
        transition: none;
    }
}

.wc-btn:hover {
    color: #212529;
    text-decoration: none;
}

.wc-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.wc-btn:disabled {
    opacity: .65;
}

.wc-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.wc-btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.wc-btn-primary:focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 .2rem rgba(38,143,255,.5);
}

.wc-btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.wc-btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.wc-btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.wc-btn-secondary:focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
}

.wc-btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.wc-btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.wc-btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.wc-btn-success:focus {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
    box-shadow: 0 0 0 .2rem rgba(72,180,97,.5);
}

.wc-btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.wc-btn-danger{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}

.wc-btn-danger:hover{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130;
}

.wc-btn-danger:focus{
    color:#fff;
    background-color:#c82333;
    border-color:#bd2130;
    box-shadow:0 0 0 .2rem rgba(225,83,97,.5);
}

.wc-btn-danger:disabled{
    color:#fff;
    background-color:#dc3545;
    border-color:#dc3545;
}

.wc-btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.wc-btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}

.wc-btn-warning:focus {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222,170,12,.5);
}

.wc-btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.wc-btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.wc-btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.wc-btn-info:focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
}

.wc-btn-info:disabled {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.wc-btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.wc-btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.wc-btn-light:focus {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: 0 0 0 .2rem rgba(216,217,219,.5);
}

.wc-btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.wc-btn-dark{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40;
}

.wc-btn-dark:hover{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124;
}

.wc-btn-dark:focus{
    color:#fff;
    background-color:#23272b;
    border-color:#1d2124;
    box-shadow:0 0 0 .2rem rgba(82,88,93,.5);
}

.wc-btn-dark:disabled{
    color:#fff;
    background-color:#343a40;
    border-color:#343a40;
}

.wc-btn-link {
    font-weight: 400;
    color: #007bff;
    text-decoration: none;
}

.wc-btn-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wc-btn-link:focus {
    text-decoration: underline;
    box-shadow: none;
}

.wc-btn-link:disabled {
    color: #6c757d;
    pointer-events: none;
}

/* Form */

/* Form Group */

.wc-form-group
{
    margin-bottom: 1rem;
}


/* Form control */


/* input */

.wc-form-control
{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

@media (prefers-reduced-motion:reduce) {
    .wc-form-control {
        transition: none;
    }
}

.wc-form-control::-ms-expand
{
    background-color: transparent;
    border: 0;
}

.wc-form-control:-moz-focusring
{
    color: transparent;
    text-shadow: 0 0 0 #495057;
}

.wc-form-control:focus
{
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.wc-form-control::-webkit-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::-moz-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control:-ms-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::-ms-input-placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control::placeholder
{
    color: #6c757d;
    opacity: 1;
}

.wc-form-control:disabled
{
    background-color: #e9ecef;
    opacity: 1;
}

textarea.form-control
{
    min-height: 200px;
    height: auto;
}

/* input group */

.wc-input-group
{
    display: flex;
    align-items: center
}

/* input group prepend */

.wc-input-group-prepend
{
    padding: 10px;
    border: 1px solid #000;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.wc-form-text {
    display: block;
    margin-top: .25rem;
}

.wc-text-muted {
    color: #6c757d !important;
}
jsbin.furawot.js
content_copyfile_download
"use strict";

window.addEventListener("load", function () {
	var $allBtnModal = document.querySelectorAll("[data-toggle='modal']");
	$allBtnModal.forEach(function (e, k) {
		var $modal = document.querySelector("#" + e.dataset.target);
		e.addEventListener("click", function () {
			$modal.classList.add("wc-show-modal");
			document.querySelector("body").style.overflow = "hidden";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.add("wc-show-modal-background");
			}
		});
		$modal.querySelector(".wc-close-button").addEventListener("click", function () {
			$modal.classList.remove("wc-show-modal");
			document.querySelector("body").style.overflow = "auto";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.remove("wc-show-modal-background");
			}
		});
		$modal.querySelector(".wc-close-modal").addEventListener("click", function () {
			$modal.classList.remove("wc-show-modal");
			document.querySelector("body").style.overflow = "auto";
			if ($modal.parentElement.classList.contains("wc-modal-background-fixed")) {
				$modal.parentElement.classList.remove("wc-show-modal-background");
			}
		});
	});
});