两种WEB下的模态对话框
作者:Jacky.zhou
时间:2009/06/03
概述
在如今互联网网站上,AJAX效果风靡一时,应该说AJAX技术在未来几年不会动摇,在AJAX效果中,模态对话框是比较常见的效果,也是非常适用的。在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框:
效果
方法一
本方法是采用ASP.NET AJAX的扩展控件:ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的:
第一步,我们先创建一个ASP.NET页面:ModalPopup.aspx
页面代码:



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

后台代码:

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

就这样,通过很简单的扩展控件就实现了模态对话框的效果,但是,我后来想了想,我感觉用纯JS来实现更简单些,所以,我用纯JS来实现了一次,很快成功了!
方法二
我们这次创建一个HTML页面:Popup.html
代码如下:

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

就这样,我用两种方式实现了前面展示的那样的效果,其实我自己感觉,用纯JS写效果比用控件写更好,自己更明确整个效果代码的流程。