欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js當前頁面登錄注冊框,固定div,底層陰影的實例代碼

 更新時間:2016年10月04日 20:12:22   投稿:jingxian  
下面小編就為大家?guī)硪黄猨s當前頁面登錄注冊框,固定div,底層陰影的實例代碼。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

這是一個實例,保存代碼為html文件運行試試吧。兼容火狐、ie6、ie7、ie8、Chrome等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS當前頁面登錄注冊框,固定DIV,底層陰影 - 腳本之家</title>
<!--
一個按鈕
點擊之后 顯示一個div
div要水平 垂直居中
當我瀏覽器高度 寬度變化的時候
div依然水平 垂直居中
點擊遮罩層,浮動層隱藏
知識點:
1.如何用css控制div水平垂直居中
2.如何用js取得瀏覽器高度寬度
3.如何控制resize事件-->
<style type="text/css">
.hidden{ display:none}
/*評論浮動層*/
#smallLay{width:498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;}
</style>
</head>
<script type="text/javascript">
  //判斷瀏覽器ie6創(chuàng)建的div的樣式和非ie6創(chuàng)建的div的樣式
  //創(chuàng)建div
  function showid(idname) {
    var isIE = (document.all) ? true : false;
    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
    var newbox = document.getElementById(idname);
    newbox.style.zIndex = "9999";
    newbox.style.display = "block"
    newbox.style.position = !isIE6 ? "fixed" : "absolute";
    newbox.style.top = newbox.style.left = "50%";
    newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
    var jihualayer = document.createElement("div");
    jihualayer.id = "jihualayer";
    jihualayer.style.width = jihualayer.style.height = "100%";
    jihualayer.style.position = !isIE6 ? "fixed" : "absolute";
    jihualayer.style.top = jihualayer.style.left = 0;
    jihualayer.style.backgroundColor = "#000";
    jihualayer.style.zIndex = "9998";
    jihualayer.style.opacity = "0.6";
    document.body.appendChild(jihualayer);
    var sel = document.getElementsByTagName("select");
    for (var i = 0; i < sel.length; i++) {
      sel[i].style.visibility = "hidden";
    }
    function jihualayer_iestyle() {
      jihualayer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
+ "px";
      jihualayer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
"px";
    }
    function newbox_iestyle() {
      newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
      newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
    }
    if (isIE) { jihualayer.style.filter = "alpha(opacity=60)"; }
    if (isIE6) {
      jihualayer_iestyle()
      newbox_iestyle();
      window.attachEvent("onscroll", function () {
        newbox_iestyle();
      })
      window.attachEvent("onresize", jihualayer_iestyle)
    }
    jihualayer.onclick = function () {
      newbox.style.display = "none"; jihualayer.style.display = "none"; for (var i = 0; i < sel.length; i++) {
        sel[i].style.visibility = "visible";
      } 
    }
  }
</script>
<body>
<div style="width:200px; height:100px;"></div>
<input name="" type="button" id="showbtn" value="點擊顯示" onclick="showid('smallLay')" />
<!--收藏浮層開始-->
<div id="smallLay" style="display:none" >
這<a  style="text-decoration:none; color:Gray;">是</a>懸浮層
</div>
<!--收藏浮層結束-->
<div id="a" style="height:1000px;">這<a  style="text-decoration:none; color:Black;">是</a>普通層</div>
</body>
</html>

以上就是小編為大家?guī)淼膉s當前頁面登錄注冊框,固定div,底層陰影的實例代碼全部內容了,希望大家多多支持腳本之家~

相關文章

  • js實現百度登錄窗口拖拽效果

    js實現百度登錄窗口拖拽效果

    這篇文章主要為大家詳細介紹了js實現百度登錄窗口拖拽效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • 微信小程序開發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實例

    微信小程序開發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實例

    本篇文章主要介紹了微信小程序開發(fā)之視頻播放器 Video 彈幕 彈幕顏色自定義實例,具有一定的參考價值,有興趣的同學可以了解一下。
    2016-12-12
  • javascript tabIndex屬性

    javascript tabIndex屬性

    圍繞表單的可訪問性與交互性上,各瀏覽器都下了很大工夫,比如fieldset與legend等用于增強區(qū)域感的元素,for,accessKey,defaultValue,maxlength,tabIndex等用于交互或提示的屬性。不過,今天只講tabIndex。
    2009-12-12
  • js函數名與form表單元素同名沖突的問題

    js函數名與form表單元素同名沖突的問題

    本篇文章主要是對js函數名與form表單元素同名沖突的問題進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-03-03
  • js 將canvas生成圖片保存,或直接保存一張圖片的實現方法

    js 將canvas生成圖片保存,或直接保存一張圖片的實現方法

    下面小編就為大家分享一篇js 將canvas生成圖片保存,或直接保存一張圖片的實現方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • java遇到微信小程序

    java遇到微信小程序 "支付驗證簽名失敗" 問題解決

    這篇文章主要介紹了java遇到微信小程序 "支付驗證簽名失敗" 問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • Javascript如何遞歸遍歷本地文件夾

    Javascript如何遞歸遍歷本地文件夾

    這篇文章主要介紹了Javascript如何遞歸遍歷本地文件夾,文中代碼非常細致,幫助大家更好的理解和學習JavaScript遞歸,感興趣的朋友可以了解下
    2020-08-08
  • 如何使用js查找數組中符合條件的元素

    如何使用js查找數組中符合條件的元素

    這篇文章主要給大家介紹了關于如何使用js查找數組中符合條件的元素,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2023-04-04
  • 利用js正則表達式驗證手機號,email地址,郵政編碼

    利用js正則表達式驗證手機號,email地址,郵政編碼

    利用js正則表達式驗證手機號,email地址,郵政編碼。需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • 原生JS改變透明度實現輪播效果

    原生JS改變透明度實現輪播效果

    這篇文章主要為大家詳細介紹了原生JS實現的輪播效果,通過改變圖片的透明度來實現輪播的效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03

最新評論