js或者jquery实现页面中的一个div全屏

JavaScript016

js或者jquery实现页面中的一个div全屏,第1张

1、引入外部jquery文件

比如：

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

2、点击按钮时的JQuery代码

$(document).ready(function () {

 $("#go").click(function () {       

 /*属性*/       

 $("#go2").css({ "position": "absolute", "text-align": "center", "top": "0px", "left": "0px", "right": "0px", "bottom": "0px", "background": "red", "visibility": "visible", "filter": "Alpha(opacity=90)"

 })       

 /*高为屏幕的高*/       

 $("#go2").css({           

     height: function () {           

         return $(document).height()       

     },           

     width:"100%"        

 })    

})

})

3、html页面代码

<asp:Button ID="go" runat="server" Style="width: 380px position: absolute top: 249pxleft: 425px background-color: Green height: 65px" Text="后台执行程序，前台遮盖，运行完毕后自动消失" />

<div id="go2">

 正在提交数据...

</div>

现在手机屏幕大小众多，你要是根据px来设置宽度来让手机页面全屏的话，那肯定是无法实现的。手机页面的实现，宽度一定是要用百分比的。至于高度自己酌情来设定，全屏的话用100%，不论任何大小屏幕的手机打开都是全屏的。PS:如果是触屏手机，<head></head>里面加上<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />，可以防止双击屏幕的时候页面放大问题。