-
Notifications
You must be signed in to change notification settings - Fork 0
/
modal.html
104 lines (64 loc) · 3.86 KB
/
modal.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Title</title>
</head>
<body class="container">
<button class="btn btn-info" data-toggle="modal" data-target="#demo">Sign Up</button>
<div class="modal fade" id="demo">
<div class="modal-dialog modal-dialog-center modal-xl">
<div class="modal-content">
<div class="modal-body">
<form action="">
<label for="name">Name</label>
<input type="name" id="name" name="name" class="form-control form-control-sm">
<label for="pas">Password</label>
<input type="password" id="pas" name="pass" class="form-control form-control-sm">
<div class="custom-control custom-checkbox mb-6">
<input type="checkbox" name="xhexk" id="box" class="custom-control-input">
<label for="box" class="custom-control-label">I accept bla bla</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radio" id="check" class="custom-control-input">
<label for="check" class="custom-control-label">Radio Button</label>
</div>
<select name="value" id="check" class="custom-select">
<option value="xx" class="active">xx</option>
<option value="yy">yyy</option>
</select>
<hr>
<h2>gogog</h2>
</form>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="container-fluid">
<h1>another modal example here</h1>
<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#demo2">Click to</button>
<div class="modal fade" id="demo2">
<div class="modal-dialog model-lg modal-dialog-center">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>