ポップアップ効果を実現するにはjsを使用します

ポップアップ効果を実現するにはjsを使用します

この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

ポップアップウィンドウの表示と非表示を制御するには、ディスプレイを使用します。

<!-- ポップアップ レイヤー -->
<div id="popLayer"></div> <!--黒いマスク-->
<div id="popBox">
  <div class="閉じる">
   バツ
  </div>
  <div>
   <!-- 目次 -->
 </div>
</div>

js:

//閉じるボタンをクリックします var close = document.querySelector(".close")
close.onclick = 関数(){
 console.log("クリック")
 var popBox = document.getElementById("popBox");
 var popLayer = document.getElementById("popLayer");
 popBox.style.display = "なし";
 popLayer.style.display = "なし";
}


//表示が必要なときに呼び出しますvar popLayer = document.getElementById("popLayer");
popBox.style.display = "ブロック";
popLayer.style.display = "ブロック";

CS: ...

/* ポップアップレイヤー*/
#popレイヤー{
 表示: なし;
 背景色: #000;
 位置: 絶対;
 上: 0;
 右: 0;
 下部: 0;
 左: 0;
 zインデックス: 10;
 不透明度: 0.6;
}

/*ポップアップレイヤー*/
#ポップボックス{
 表示: なし;
 背景色: #FFFFFF;
 zインデックス: 11;
 幅: 220ピクセル;
 高さ: 300px;
 位置: 固定;
 上: 0;
 右: 0;
 左: 0;
 下部: 0;
 マージン: 自動;
}

/*閉じるボタン*/
#popBox .close {
 幅: 20px;
 高さ: 20px;
 境界線の半径: 50%;
 位置: 絶対;
 境界線: 1px 実線 #fff;
 色: #fff;
 テキスト配置: 中央;
 行の高さ: 20px;
 右: 8px;
 上: 8px;
 zインデックス: 50;
}

#popBox .close {
 テキスト装飾: なし;
 色: #2D2C3B;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue.js でのトーストの使用法とトーストポップアップボックスを使用したサンプルコード
  • Vue.jsはポップアップウィンドウを一度だけ実装します
  • js+html5は半透明マスクレイヤーポップアップボックスの効果を実現します
  • jsカスタムポップアップボックスプラグインのカプセル化
  • layer.js に基づいて配送先住所ポップアップボックスの選択を実装し、対応する住所情報を返します。
  • jsを使用して、上、下、左、右のポップアップボックスの効果を実現します。
  • Struts JSON 型例外が js ポップアップ ボックスに戻る問題の解決策
  • 閉じられないポップアップボックスを実現するJavaScript
  • jsポップアップボックスの表示オプションを簡単に実装
  • 自家製ポップアップボックスを使用した Bootstrap と Angularjs のサンプルコード

<<:  MySQLトリガーの使用例の詳細

>>:  CentOS仮想マシンの時刻を変更する方法

推薦する

CentOS 6 は Docker を使用して Zookeeper 操作例を展開します

この記事では、Docker を使用して Centos6 に Zookeeper をデプロイする方法に...

HTMLでカスタムタグを使用する方法

カスタム タグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点...

負の距離(共感) - 相互影響の反復プロセス

ネガティブな距離は共感を意味します。序文(疑問の提起):プロダクトマネージャーは機能を把握します。機...

Linux mysql-5.6 でルート パスワードをリセットする方法

1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...

CSS3 はドラッグ可能なルービックキューブの 3D 効果を実現します

主に使用される知識ポイント: •css3 3D変換 •ネイティブjsマウスドラッグイベント•表示:グ...

MySQL マスタースレーブレプリケーションプロセスの詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...

MySQL にテキストと画像を保存する方法

Oracle の大きなテキスト データ型 Clob 長いテキスト型 (MySQL ではサポートされて...

CSS でテキストシャドウと要素シャドウ効果を使用する

テキストシャドウの紹介CSSでは、 text-shadowプロパティを使用してテキストの影を設定しま...

K8S クラスターを構築し、Hyper-V で Docker をインストールする方法

Win10 システムをインストールしていて、k8s クラスターを構築する場合、Win10 に付属する...

CUDA8.0とCUDA9.0はUbuntu16.04で共存します

序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

Docker ベースの Tomcat クラスタと Nginx ロード バランシングの展開の概要

目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...