javascript弹窗

前些天接手asp.net项目，要用到弹窗，项目里面在一直用的是ajaxcontroltoolkit控件集中的modalpopupextender，这个控件一刷新就消失，而且十分影响效率，于是自制了一个简单弹出窗口。现脱离开项目，将代码嵌入网页中，主要用的是javascript和CSS，如果想在服务端控制弹窗，可以设置id="showwindow"的div属性runat="server" visible="false"，此弹窗在Chrome和IE下都可运行，代码如下：

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>自制弹窗 By yangzehua</title>
  6     <style type="text/css">
  7         #showwindow
  8         {
  9             visibility: hidden;
 10         }
 11 
 12         .modalpopupbg
 13         {
 14             clear: both;
 15             width: 100%;
 16             height: 100%;
 17             background-color: #A6A6A6;
 18             /*透明度设置*/
 19             filter: alpha(opacity=50);
 20             -moz-opacity: 0.5;
 21             opacity: 0.5;
 22             /*fixed关联的是浏览器窗口*/
 23             position: fixed;
 24             top: 0px;
 25             left: 0px;
 26         }
 27 
 28         .modalpopup
 29         {
 30             background-color: #FFFFDD;
 31             position: absolute;
 32             /*CSS3圆角设置*/
 33             -webkit-border-radius: 8px;
 34             -moz-border-radius: 8px;
 35             border-radius: 8px;
 36             /*CSS3阴影设置*/
 37             -webkit-box-shadow: #666 0px 0px 10px;
 38             -moz-box-shadow: #666 0px 0px 10px;
 39             box-shadow: #666 0px 0px 10px;
 40         }
 41 
 42         #cancelbtn
 43         {
 44             float: right;
 45             margin-right: 30px;
 46         }
 47 
 48             #cancelbtn:hover
 49             {
 50                 cursor: pointer;
 51             }
 52     </style>
 53     <script type="text/javascript">
 54         var on_load = function () {
 55             var showwindow = document.getElementById("showwindow");
 56             showwindow.style.visibility = "hidden";
 57         }
 58         var showPopup = function () {
 59             var showwindow = document.getElementById("showwindow");
 60             var popUp = document.getElementById("modalpopup");
 61             popUp.style.height = document.documentElement.clientHeight * 0.6 + "px";
 62             popUp.style.width = document.documentElement.clientWidth * 0.4 + "px";
 63             popUp.style.top = document.documentElement.clientHeight * 0.2 + "px";
 64             popUp.style.left = document.documentElement.clientWidth * 0.3 + "px";
 65             showwindow.style.visibility = "visible";
 66         }
 67         function hidePopup() {
 68             var showwindow = document.getElementById("showwindow");
 69             showwindow.style.visibility = "hidden";
 70         }
 71     </script>
 72 </head>
 73 <body>
 74     <div>
 75         这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
 76 　　沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
 77 　　路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
 78 　　曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
 79 　　月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
 80 　　荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾；但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有。
 81 　　忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好：
 82 　　于是妖童媛女，荡舟心许；鷁首徐回，兼传羽杯；欋将移而藻挂，船欲动而萍开。尔其纤腰束素，迁延顾步；夏始春余，叶嫩花初，恐沾裳而浅笑，畏倾船而敛裾。
 83 　　可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。
 84 　　于是又记起《西洲曲》里的句子：
 85 　　采莲南塘秋，莲花过人头；低头弄莲子，莲子清如水。今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。——这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。
 86     </div>
 87     <input type="button" value="评论" onclick="showPopup()" />
 88     <div id="showwindow">
 89 
 90         <div class="modalpopupbg" id="modalpopupbg"></div>
 91 
 92         <div class="modalpopup" id="modalpopup">
 93 
 94             <div style="height: 20%; text-align: center;">
 95                 <h1>标题行</h1>
 96             </div>
 97 
 98             <div style="width: 100%; height: 60%; text-align: center">
 99                 <!--此处可写弹出页面的主要内容-->
100                 <table style="margin-left: auto; margin-right: auto">
101                     <tr>
102                         <td>
103                             <label for="username">用户名</label></td>
104                         <td>
105                             <input type="text" id="username" style="width: 160px" /></td>
106                     </tr>
107                     <tr>
108                         <td>
109                             <label for="password">密&nbsp;&nbsp;码</label></td>
110                         <td>
111                             <input id="password" type="password" style="width: 160px" /></td>
112                     </tr>
113                     <tr>
114                         <td colspan="2" align="right">
115                             <input type="submit" value="登录" /></td>
116                     </tr>
117                 </table>
118             </div>
119 
120             <div style="height: 20%">
121                 <img alt="pic" src="img/cancel.gif" id="cancelbtn" onclick="hidePopup()" />
122             </div>
123 
124         </div>
125 
126     </div>
127 </body>
128 </html>

 

posted on 2014-03-10 14:41  yangzehua  阅读(415)  评论(1)    收藏  举报

导航