DiracSpace/modalconjavascriptycss.html

## modalconjavascriptycss.html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <button class="modal-uno">click me</button>

    <div class="modal claseModalAbrir">

        <!-- Modal -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
        </div>
        <!-- modal -->
    </div>

    <script>
        var modal = document.querySelector(".claseModalAbrir");
        var btn = document.querySelector('.modal-uno');
        var span = document.querySelector('.close');

        btn.addEventListener("click", () => {
            modal.style.display = "block";
        });

        span.addEventListener("click", () => {
            modal.style.display = "none";
        });

        window.onclick = function (event) {
            if (event == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>

</html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	}

	.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	}

	.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	}

	.close:hover,
	.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
	}
	</style>
	</head>

	<body>

	<button class="modal-uno">click me</button>

	<div class="modal claseModalAbrir">

	<!-- Modal -->
	<div class="modal-content">
	<span class="close">×</span>
	<p>Some text in the Modal..</p>
	</div>
	<!-- modal -->
	</div>

	<script>
	var modal = document.querySelector(".claseModalAbrir");
	var btn = document.querySelector('.modal-uno');
	var span = document.querySelector('.close');

	btn.addEventListener("click", () => {
	modal.style.display = "block";
	});

	span.addEventListener("click", () => {
	modal.style.display = "none";
	});

	window.onclick = function (event) {
	if (event == modal) {
	modal.style.display = "none";
	}
	}
	</script>
	</body>

	</html>