ポップアップ効果を実現するには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仮想マシンの時刻を変更する方法

推薦する

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...

Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。

背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...

Mybatis+mysqlはストアドプロシージャを使用してシリアル番号実装コードを生成します。

同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...

VMware Tools を最初からインストールするための詳細な手順 (グラフィック チュートリアル)

VMware Tools は VMware 仮想マシンに付属するツールで、VirtualBox (...

理論の普及——ユーザーエクスペリエンス

1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...

スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

著者は1年以上マイクロフロントエンドプロジェクトに取り組んできました。チームは10個のマイクロアプリ...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

HTMLのタグについての簡単な説明

0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

シェルスクリプトを使用したMySQLデータベースの自動バックアップ

シェルスクリプトを使用したMySQLデータベースの自動バックアップデータベースを頻繁にバックアップす...

Layuiテーブル行のデータを動的に編集する

目次序文スタイル機能説明初期化コードイベントリスナーの追加リスナーツールバーモニターテーブル行ツール...

Vueコンポーネントの詳細な説明

<本文> <div id="ルート"> <h2&...

WeChatアプレットを使用して天井効果を実現する方法の例

目次1. 実装2. 問題点3. より良い実装方法があるかどうか検討する要約する背景は日付のタイトルで...

HTMLのリストタグを数える

1. <dl>はリストを定義し、<dt>はリスト内の項目を定義し、<d...