ネイティブでJSポップアッププラグインzDialogを使用する方法

2年 ago
優斗, 朝陽
1 minute

「zDialogプラグイン」を用いた方法を以下に記載します。

  1. 必要なファイルの取り込み：HTMLファイルにzDialogのCSSとJavaScriptファイルを取り込みます。
<link rel="stylesheet" href="zDialog.css">
<script src="zDialog.js"></script>
  1. 作成ボタンなどをHTMLファイルに用意し、ポップアップの表示をトリガーする。
<button id="openDialog">打开弹窗</button>
  1. JavaScript コードを書く：JavaScript ファイル内で、zDialog の API を使ってダイアログの作成と制御ができます。
document.getElementById("openDialog").addEventListener("click", function() {
  // 创建弹窗
  var dialog = new zDialog({
    title: "弹窗标题",
    content: "弹窗内容",
    width: "400px",
    height: "200px",
    buttons: [
      {
        text: "确定",
        click: function() {
          // 点击确定按钮的回调函数
          console.log("点击了确定按钮");
          dialog.close(); // 关闭弹窗
        }
      },
      {
        text: "取消",
        click: function() {
          // 点击取消按钮的回调函数
          console.log("点击了取消按钮");
          dialog.close(); // 关闭弹窗
        }
      }
    ]
  });

  // 打开弹窗
  dialog.open();
});

上記のコードでは、まずnew zDialog(options)でダイアログオブジェクトを作成し、オプションはダイアログの設定を含むオブジェクトとします。 設定可能なパラメータは次のとおりです。

  1. ポップアップのタイトル
  2. ポップアップの内容
  3. 幅（はば）：ポップアップの幅
  4. ポップアップの高さ:
  5. ボタン：モーダルのボタンで、配列となっています。各ボタンのオブジェクトには text（ボタンのテキスト）と click（ボタンをクリックしたときのコールバック関数）の 2 つのプロパティが含まれています。

ダイアログを開くときはdialog.open()を使用し、閉じる際はdialog.close()を使用します。

ネイティブの日本語でパラフレーズされた文：簡単に言えば、zDialogプラグインでポップアップを作成して制御する基本ステップは以上です。具体的なニーズに合わせて、パラメーターの設定やAPIの呼び出しでより広範な機能を実現できます。

bannerAds