MaxInterview - popup box in html

06 Jan 2020

1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body {font-family: Arial, Helvetica, sans-serif;}
7
8/* The Modal (background) */
9.modal {
10  display: none; /* Hidden by default */
11  position: fixed; /* Stay in place */
12  z-index: 1; /* Sit on top */
13  padding-top: 100px; /* Location of the box */
14  left: 0;
15  top: 0;
16  width: 100%; /* Full width */
17  height: 100%; /* Full height */
18  overflow: auto; /* Enable scroll if needed */
19  background-color: rgb(0,0,0); /* Fallback color */
20  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
21}
22
23/* Modal Content */
24.modal-content {
25  background-color: #fefefe;
26  margin: auto;
27  padding: 20px;
28  border: 1px solid #888;
29  width: 80%;
30}
31
32/* The Close Button */
33.close {
34  color: #aaaaaa;
35  float: right;
36  font-size: 28px;
37  font-weight: bold;
38}
39
40.close:hover,
41.close:focus {
42  color: #000;
43  text-decoration: none;
44  cursor: pointer;
45}
46</style>
47</head>
48<body>
49
50<h2>Modal Example</h2>
51
52<!-- Trigger/Open The Modal -->
53<button id="myBtn">Open Modal</button>
54
55<!-- The Modal -->
56<div id="myModal" class="modal">
57
58  <!-- Modal content -->
59  <div class="modal-content">
60    <span class="close">&times;</span>
61    <p>Some text in the Modal..</p>
62  </div>
63
64</div>
65
66<script>
67// Get the modal
68var modal = document.getElementById("myModal");
69
70// Get the button that opens the modal
71var btn = document.getElementById("myBtn");
72
73// Get the <span> element that closes the modal
74var span = document.getElementsByClassName("close")[0];
75
76// When the user clicks the button, open the modal 
77btn.onclick = function() {
78  modal.style.display = "block";
79}
80
81// When the user clicks on <span> (x), close the modal
82span.onclick = function() {
83  modal.style.display = "none";
84}
85
86// When the user clicks anywhere outside of the modal, close it
87window.onclick = function(event) {
88  if (event.target == modal) {
89    modal.style.display = "none";
90  }
91}
92</script>
93
94</body>
95</html>

Simon

23 May 2020

1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title></title>
6</head>
7<body>
8<button onclick = 'f=window.open("URL,exampe - google.com","fenetre","the style (without style tag, example - width=400, height=600, no px")'style="cursor: pointer;">pop up</button>
9</body>
10</html>

popup box in html

Solutions on MaxInterview for popup box in html by the best coders in the world