JavaScript_test/dialog.html at master · andychiu923/JavaScript_test · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>對話框</title>
	<style type = "text/css">
		body{
			text-align: center;
			font-family: "微軟正黑體",arial;
		}

		.dialog{
			position: fixed;
			top: 100px;
			left: 50%;
			transform: translate(-150px, 0px);
			width: 300px;
			border: 1px solid #888888;
			background-color: #eeeeee;
			box-shadow: 0px 0px 10px #000000;
			display: none;
			border-radius: 10px;
			z-index: 2;
			transition: opacity 0.5s;
		}

		.dialog-mask{
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			opacity: 0.5;
			background-color: #000000;
			display: none;
			z-index: 1;
		}

		.dialog>.head{
			background-color: #444444;
			color: #ffffff;
			padding: 10px;
			font-weight: bold;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			cursor: move;
		}

		.dialog>.head>.close{
			float: right;
			cursor: pointer;
		}

		.dialog>.content{
			padding: 10px;
			background-color: #ffffff;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
	</style>
	<script>
		var dialog;
		var dialogMask;

		window.onload = function () {		// on load
			dialog = document.getElementById("dialog");
			dialogMask = document.getElementById("dialog-mask");
			var head = document.getElementById("dialog-head");		// add eventlistener
			head.addEventListener("mousedown", dragDialog);
		}

		function dragDialog(e)
		{
			//alert(e.clientX + " " + e.clientY);
			// get mouse position and calculate diff
			var differX = e.clientX - dialog.offsetLeft;
			var differY = e.clientY - dialog.offsetTop;
			//alert(differX + " " + differY);

			var move = function(e)			// when mouse is moving int the screen
			{
				//document.title = e.clientX + " , " + e.clientY;
				dialog.style.left = (e.clientX - differX)+ "px";
				dialog.style.top = (e.clientY - differY)+ "px";
			};

			var end = function(e)			// when user release mouse button
			{
				// when the drag is over, remove eventlistener
				document.removeEventListener("mousemove", move);
				document.removeEventListener("mouseup", end);
			};
			// add eventlistener for mousemove and mouseup
			document.addEventListener("mousemove", move);
			document.addEventListener("mouseup", end);
		}

		function showDialog(){

			dialog.style.left = "50%";
			dialog.style.top = "100px";
			dialog.style.opacity = 0;
			dialog.style.display = "block";
			dialogMask.style.display = "block";
			window.setTimeout(function(){
				dialog.style.opacity = 1;
			},10);
		}

		function closeDialog() {
			dialog.style.display = "none";
			dialogMask.style.display = "none";
		}
	</script>
</head>
<body>
	<button onclick="showDialog();">Contact Me</button>
	<div class="frame">
		<div id = "dialog" class="dialog">
		<div id = "dialog-head" class="head">
			My Contact Info
			<div onclick = "closeDialog();" class="close">X</div>
		</div>
		<div class="content">
			About Me<br/>
			Email: andychiu923@gmail.com<br/>
			Address: ChungLi City,Taiwan
		</div>
		</div>
	</div>
	<div id="dialog-mask" class="dialog-mask" onclick = "closeDialog();"></div>
</body>
</html>