コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQuery css html はページマスクポップアップを実装します box_jquery

WBOY
リリース： 2016-05-16 17:39:40
オリジナル
1299 人が閲覧しました

ページ マスク ポップアップ ボックスは、現在、jQuery を使用してページ マスク ポップアップ ボックスを実装するのに使用されます。

HTML コードは次のとおりです:

コードをコピーします コードは次のとおりです:

ここをクリックして効果を確認してください


コードをコピーします コードは次のとおりです:body {
フォントファミリー: Arial、Helvetica、サンセリフ;
font-size:12px;
margin:0;
#main {
height:1800px ;
padding-top:90px;
text-align:center;
#fullbg {
background-color:gray;
opacity: 0.5;
位置:絶対;
z-index:3;
-moz-opacity:0.5; -khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px ソリッド rgba(0,0,0, 0.4); 400px;
left:50%;
margin:-200px 0 0 -200px;
position:fixed ! important;絶対;
トップ:50%;
z-index:5;
表示:なし;ダイアログ p {
マージン:0 0 12px;
行の高さ:24px;
背景:#CCCCCC;
#dialog p.close {
text-align:right;
padding-right:10px;
#dialog p.close a {
color:#fff;
>}



jQuery コードは次のとおりです:




コードをコピー


コードは次のとおりです。次のように:


おおよそのプレビュー:

ie9 でプレビュー




Firefox でプレビュー




Chrome でプレビュー



関連ラベル：
ポップアップボックス マスク
ソース：php.cn
前の記事：スクロールバーに続いてブログサイドバーモジュールをスライドさせる固定効果の実装方法(js jquery等)_javascriptスキル 次の記事：1 回だけ表示されるプロンプト メッセージ (js cookie)_javascript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Next.js のレイアウトによりページのコンテンツが見えにくくなる Next.js アプリケーションのレイアウトとして、マテリアル ui (https://mui.com/material-ui/react-bottom-navigation/) ...
から 2024-04-02 19:42:19
0
1
275
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート