jQuery設定div居中及實現遮罩層

2021-09-19 07:32:50 字數 2039 閱讀 4332

jquery設定div居中及實現遮罩層

這裡主要講遮罩層

web前端開發,寫**靜態頁面時經常遇到些遮罩層和設定div(物體)居中。

這裡又我自己寫的乙個例項,提供參考。

效果圖1:

效果圖2:

這兩張看是沒有什麼區別,可以說做起來可就沒那麼容易咯(這個問題我可是弄了半天呢。)

第一張:內容比較少 ,只有獲取瀏覽器的高度就可以

var sw=$(window).height();

第二張:內容比較多,就要獲取body的高度

var sb=$('body').height();

其實呢,做出來也簡單,只要判斷就可以了

js**

遮罩層//顯示遮罩層

functionshowscreen());

$('#hintbox').css('display','block');//提示框}

設定物體居中

$(function();

//關閉提示框(這個就不用太在意 )

$('.btn_hint').click(function());

});

css**

#hintbox

#hintbox h1

#hintbox p

#hintbox .btn_hint

.lock

html **

問卷調查,問卷調查問卷調查問卷調查

問卷調查,問卷調查問卷調查問卷調查

問卷調查,問卷調查問卷調查問卷調查

問卷調查,問卷調查問卷調查問卷調查

2016-11-8

已結束

有待完善!

jquery設定div居中及實現遮罩層

這裡主要講遮罩層

web前端開發,寫**靜態頁面時經常遇到些遮罩層和設定div(物體)居中。

這裡又我自己寫的乙個例項,提供參考。

效果圖1:

效果圖2:

這兩張看是沒有什麼區別,可以說做起來可就沒那麼容易咯(這個問題我可是弄了半天呢。)

第一張:內容比較少 ,只有獲取瀏覽器的高度就可以

var sw=$(window).height();

第二張:內容比較多,就要獲取body的高度

var sb=$('body').height();

其實呢,做出來也簡單,只要判斷就可以了

js**

遮罩層//顯示遮罩層

functionshowscreen());

$('#hintbox').css('display','block');//提示框}

設定物體居中

$(function();

//關閉提示框(這個就不用太在意 )

$('.btn_hint').click(function());

});

css**

#hintbox

#hintbox h1

#hintbox p

#hintbox .btn_hint

.lock

html **

問卷調查,問卷調查問卷調查問卷調查

問卷調查,問卷調查問卷調查問卷調查

問卷調查,問卷調查問卷調查問卷調查

問卷調查,問卷調查問卷調查問卷調查

2016-11-8

已結束

有待完善!

jQuery設定div居中及實現遮罩層

jquery設定div居中及實現遮罩層 這裡主要講遮罩層 web前端開發,寫 靜態頁面時經常遇到些遮罩層和設定div 物體 居中。這裡又我自己寫的乙個例項,提供參考。效果圖1 效果圖2 這兩張看是沒有什麼區別,可以說做起來可就沒那麼容易咯 這個問題我可是弄了半天呢。第一張 內容比較少 只有獲取瀏覽器...

DIV 設定垂直居中

要說面試官經常問的問題中 如何將乙個塊元素水平垂直居中 就算乙個。之前的面試中也有中招,現在總結一下。1 css垂直水平居中 要讓div水平和垂直居中,必需知道該div得寬度和高度,然後設定位置為絕對位置,距離頁面視窗左邊框和上邊框的距離設定為50 這個50 就是指頁面視窗的寬度和高度的50 最後將...

使用JQuery使Div居中

div居中是乙個比較常見的需求。下面介紹一種使用jquery使div居中的方法 先假設有這樣乙個div,test 首先是要把需要居中的div進行絕對定位,如 有了這樣的樣式定義之後就是使其居中的js 了。var obj d 獲得相應的div物件 var x window width 500 2 使用...