html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
Created By: Shruti
Date: 13 Oct 2019
-->
<!DOCTYPE html>
<html>
<head>
<title>Modal Dialog</title>
</head>
<body>
<button id="open_button" onclick="openmodal();">Click me</button>
<div id="modal">
<svg width="40px" height="40px">
<circle cx="20" cy="20" r="19" fill="none" stroke="#2e2" stroke-width="2" id="circle"/>
<polyline points="9,19 16,27 30,13" fill="none" stroke="#2e2" stroke-width="4" id="check"/>
</svg>
<h1>Great!</h1>
<p>To dismiss click the button below</p>
<button class="close_button" onclick="closemodal();">Dismiss</button>
</div>
<script type="text/javascript">
let openBtn = document.getElementById('open_button');
let modal = document.getElementById('modal');
let check = document.getElementById('check');
let circle = document.getElementById('circle');
function openmodal(){
openBtn.style.transform = 'scale(0)';
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
Created By: Shruti
Date: 13 Oct 2019
*/
body{
margin: 0;
padding: 0;
background: rgba(164, 255, 253, 1);
font-family: 'Helvetica', Arial, sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
button{
position: absolute;
text-transform: uppercase;
background: #4da2fd;
color: #fff;
padding: 0.8em 1.5em;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
border: none;
outline: none;
cursor: pointer;
transform: scale(1);
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
/*
Created By: Shruti
Date: 13 Oct 2019
*/
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run