JS特效：弹出窗口

最新推荐文章于 2017-07-26 10:57:00 发布

转载最新推荐文章于 2017-07-26 10:57:00 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/StarYe/archive/2009/08/11/1543593.html

文章标签：

#xhtml #javascript #ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

var popup_dragging = false;
6

var popup_target;
7

var popup_mouseX;
8

var popup_mouseY;
9

var popup_mouseposX;
10

var popup_mouseposY;
11

var popup_oldfunction;
12

function popup_display(x)
13

{
14

var win = window.open();
15

for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
16

}
17

// ----- popup_mousedown -------------------------------------------------------
18

function popup_mousedown(e)
19

{
20

var ie = navigator.appName == "Microsoft Internet Explorer";
21

if ( ie && window.event.button != 1) return;
22

if (!ie && e.button != 0) return;
23

popup_dragging = true;
24

popup_target = this['target'];
25

popup_mouseX = ie ? window.event.clientX : e.clientX;
26

popup_mouseY = ie ? window.event.clientY : e.clientY;
27

if (ie)
28

popup_oldfunction = document.onselectstart;
29

else popup_oldfunction = document.onmousedown;
30

if (ie)
31

document.onselectstart = new Function("return false;");
32

else document.onmousedown = new Function("return false;");
33

}
34

// ----- popup_mousemove -------------------------------------------------------
35

function popup_mousemove(e)
36

{
37

if (!popup_dragging) return;
38

var ie = navigator.appName == "Microsoft Internet Explorer";
39

var element = document.getElementById(popup_target);
40

var mouseX = ie ? window.event.clientX : e.clientX;
41

var mouseY = ie ? window.event.clientY : e.clientY;
42

element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
43

element.style.top = (element.offsetTop +mouseY-popup_mouseY)+'px';
44

popup_mouseX = ie ? window.event.clientX : e.clientX;
45

popup_mouseY = ie ? window.event.clientY : e.clientY;
46

}
47

// ----- popup_mouseup ---------------------------------------------------------
48

function popup_mouseup(e)
49

{
50

if (!popup_dragging) return;
51

popup_dragging = false;
52

var ie = navigator.appName == "Microsoft Internet Explorer";
53

var element = document.getElementById(popup_target);
54

if (ie)
55

document.onselectstart = popup_oldfunction;
56

else document.onmousedown = popup_oldfunction;
57

}
58

// ----- popup_exit ------------------------------------------------------------
59

function popup_exit(e)
60

{
61

var ie = navigator.appName == "Microsoft Internet Explorer";
62

var element = document.getElementById(popup_target);
63

popup_mouseup(e);
64

element.style.visibility = 'hidden';
65

element.style.display = 'none';
66

}
67

// ----- popup_show ------------------------------------------------------------
68

function popup_show()
69

{
70

element = document.getElementById('popup');
71

drag_element = document.getElementById('popup_drag');
72

exit_element = document.getElementById('popup_exit');
73

element.style.position = "absolute";
74

element.style.visibility = "visible";
75

element.style.display = "block";
76

element.style.left = (document.documentElement.scrollLeft+popup_mouseposX-10)+'px';
77

element.style.top = (document.documentElement.scrollTop +popup_mouseposY-10)+'px';
78

drag_element['target'] = 'popup';
79

drag_element.onmousedown = popup_mousedown;
80

exit_element.onclick = popup_exit;
81

}
82

// ----- popup_mousepos --------------------------------------------------------
83

function popup_mousepos(e)
84

{
85

var ie = navigator.appName == "Microsoft Internet Explorer";
86

popup_mouseposX = ie ? window.event.clientX : e.clientX;
87

popup_mouseposY = ie ? window.event.clientY : e.clientY;
88

}
89

// ----- Attach Events ---------------------------------------------------------
90

if (navigator.appName == "Microsoft Internet Explorer")
91

document.attachEvent('onmousedown', popup_mousepos);
92

else document.addEventListener('mousedown', popup_mousepos, false);
93

if (navigator.appName == "Microsoft Internet Explorer")
94

document.attachEvent('onmousemove', popup_mousemove);
95

else document.addEventListener('mousemove', popup_mousemove, false);
96

if (navigator.appName == "Microsoft Internet Explorer")
97

document.attachEvent('onmouseup', popup_mouseup);
98

else document.addEventListener('mouseup', popup_mouseup, false);
99

</script>
100

<title>无标题文档</title>
102

103

104

div.sample_popup {

}{ z-index: +1; }
105

div.menu_form_header{

}{
106

cursor:move
107

}
108

div.sample_popup div.menu_form_header
109

{

}{
110

border: 1px solid black;
111

border-bottom: 0px;
112

cursor: default;
113

width: 200px;
114

height: 20px;
115

line-height: 19px;
116

vertical-align: middle;
117

background: url('http://bbs.blueidea.com/attachments/2007/7/11/20070711_e26d3e50d0d8b886020abTHgvNiRn8J0.png') no-repeat;
118

text-decoration: none;
119

font-family: "Times New Roman", Serif;
120

font-weight: 900;
121

font-size: 13px;
122

color: #206040;
123

}
124

div.sample_popup div.menu_form_body
125

{

}{
126

border: 1px solid black;
127

width: 200px;
128

background: url('http://bbs.blueidea.com/attachments/2007/7/11/20070711_e45dd0be648898799dacqSVztsCDIfid.png') no-repeat left bottom;
129

}
130

div.sample_popup img.menu_form_exit
131

{

}{
132

float: right;
133

margin: 4px 5px 0px 0px;
134

cursor: pointer;
135

}
136

div.sample_popup table
137

{

}{
138

border-collapse: collapse;
139

width: 100%;
140

}
141

div.sample_popup th
142

{

}{
143

width: 1%;
144

padding: 0px 5px 1px 0px;
145

text-align: left;
146

font-family: "Times New Roman", Serif;
147

font-weight: 900;
148

font-size: 13px;
149

color: #004060;
150

}
151

div.sample_popup td
152

{

}{
153

width: 99%;
154

padding: 0px 0px 1px 0px;
155

}
156

div.sample_popup form
157

{

}{
158

margin: 0px;
159

padding: 8px 10px 10px 10px;
160

}
161

div.sample_popup input.field
162

{

}{
163

border: 1px solid #808080;
164

width: 95%;
165

font-family: Arial, Sans-Serif;
166

font-size: 12px;
167

}
168

div.sample_popup input.btn
169

{

}{
170

margin-top: 2px;
171

border: 1px solid #808080;
172

background-color: #DDFFDD;
173

font-family: Verdana, Sans-Serif;
174

font-size: 11px;
175

}
176

a {

}{
177

color: #FF0000;
178

text-decoration: none;
179

}
180

</style>
181

</head>
182

<body>
183

<input type="button" onclick="popup_show()" value='登录'/>
184

<div class="sample_popup" id="popup" style="visibility: hidden; display: none;">
185

<div class="menu_form_header" id="popup_drag">
186

<img class="menu_form_exit" id="popup_exit" src="http://bbs.blueidea.com/attachments/2007/7/11/20070711_45970b8e6254b86494b4cIUp1bV26gbe.png" />
187

</div>
189

<div class="menu_form_body">
190

<form method="post" action="">
191

<table>
192

<tr>
193

<th>Username:</th>
194

<td><input class="field" type="text" onfocus="select();" /></td>
195

</tr>
196

<tr>
197

<th>Password:</th>
198

<td><input class="field" type="password" onfocus="select();" /></td>
199

</tr>
200

<tr>
201

<th> </th>
202

<td><input class="btn" type="submit" value="Submit" /></td>
203

</tr>
204

</table>
205

</form>
206

</div>
207

</div>
208

</div>
209

</body>
210

</html>
211

转载于:https://www.cnblogs.com/StarYe/archive/2009/08/11/1543593.html