モーダルダイアログの実装

例

次に、ModalDialog コンポーネントの例を示します。この場合、モーダルウィンドウは初期プレーヤーディスプレイに表示されますが、プログラムで表示する方法もあります。ここでは、モーダルウィンドウに表示されている黄色のテキストがすべて表示されます。モーダルウィンドウは、右上隅の X をクリックするか、 ESC を押すまで、プレーヤーとのすべてのインタラクションをブロックします。

ModalDialogの作成

ModalDialogを実装して作成するには、さまざまな方法があります。このドキュメントで使用されている2つは次のとおりです。

を使用してcreateModal()、ヘルパー関数
ModalDialog()コンストラクタの使用

createModal () ヘルパー関数を使用する

createModal()このメソッドはコードをカプセル化し、ModalDialog を使用しやすくします。構文は次のとおりです。

createModal(content,options)

[パラメータ]	必須	説明
コンテンツ	いいえ（提供されていない場合は、モーダルでは何も表示されない)	モーダルで表示するコンテンツ
オプション	いいえ	モーダルの他のオプションを設定するオブジェクト。このマニュアルの後半で詳しく説明します。

以下は、Brightcove Player で作成および使用される ModalDialog の簡単な実装を示しています。

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.createModal('Using the helper function');
    });
  </script>

  <video-js id="myPlayerID"
    data-account="3676484087001"
    data-player="S1lOCfk6Ze"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/3676484087001/S1lOCfk6Ze_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.createModal('Using the helper function');
    });
  </script>

ModalDialogコンストラクターの使用

' クラスコンストラクタを使用して ModalDialog を実装することもできます。これは2段階のプロセスであり、クラスを取得してからオブジェクトをインスタンス化します。構文は次のとおりです。

var ModalDialog = videojs.getComponent('ModalDialog');
var myModal = new ModalDialog(player, options);

[パラメータ]	必須	説明
プレーヤー	はい	モーダルが適用されるプレーヤー
オプション	いいえ	モーダルの他のオプションを設定するオブジェクト。詳細は、次のセクションを参照してください

以下は、Brightcove Player で作成および使用される ModalDialog の実装を示しています。

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="B1mMJs3Ge"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/B1mMJs3Ge_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        options = {};
        options.content = 'In the  modal';
        options.label = 'the label';

      var ModalDialog = videojs.getComponent('ModalDialog');
      var myModal = new ModalDialog(myPlayer, options);
      myPlayer.addChild(myModal);
      myModal.open();
    });
  </script>

  <video-js id="myPlayerID"
    data-account="3676484087001"
    data-player="S1lOCfk6Ze"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/3676484087001/S1lOCfk6Ze_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        options = {};
      options.content = 'In the  modal';
      options.label = 'the label';

      var ModalDialog = videojs.getComponent('ModalDialog');
      var myModal = new ModalDialog(myPlayer, options);
      myPlayer.addChild(myModal);
      myModal.open();
    });
  </script>

この場合、ModalDialog options.contentに表示されるテキストが値に設定されます。

オプションオブジェクト

ModalDialog クラスで使用するために、オプションオブジェクトの一部として使用できるプロパティを次に示します。

プロパティ	データ型	デフォルト値	説明
コンテンツ	混合（文字列またはDOM要素）	未定義	モーダルに表示されるカスタマイズ可能なコンテンツ
説明	ストリング	未定義	モーダルの説明です。主にアクセシビリティを目的としています。
塗りつぶし常時	ブール値	本当	通常、モーダルは最初に開いたときにのみ自動的に塗りつぶされます。このオプションは、モーダルが開くたびにコンテンツを更新するように指示します
ラベルに貼り付けます	ストリング	未定義	モーダルのテキストラベル。主にアクセシビリティ用
一時的	ブール値	本当	`true`モーダルが一度しか開くことができない場合、それは閉じるとすぐに破棄されます
閉じてない	ブール値	偽	ユーザーが通常の方法でUIを介してモーダルを閉じることができない場合`true`、プログラムによる終了は可能です

前のコード例は、optionsオブジェクトを使用してとを設定して使用する方法を示していますcontent。labelプロパティを ModalDialog で設定します。

メソッド

ModalDialog クラスの一部であるメソッドを次に示します。

方法	説明
閉じる ()	モーダルを閉じます
クローズ可能 ()	モーダルが閉じ可能であるかどうかを反映するブール値を返します
説明 ()	このモーダルの説明文字列を返します。主にアクセシビリティに使用されます
空 ()	コンテンツ要素を空にします。これは、モーダルが満たされるたびに自動的に起こります
塗りつぶし ()	`content`モーダルのオプションでモーダルのコンテンツ要素を埋めます。コンテンツ要素は、この変更が行われる前に空になります
ラベル ()	このモーダルのラベル文字列を返します。主にアクセシビリティのために使用されます
オープン ()	モーダルを開きます
開いた ()	モーダルが現在開いている場合に反映ブール値を返します

HTML コンテンツを使用する

この時点まで、モーダルに表示されるコンテンツは単純な文字列でした。コンテンツとしてHTML要素を使用する場合は、少し異なるアプローチを取る必要があります。

コンテンツとしてHTMLを使用するための鍵は、あなたが後でコンテンツに割り当てるいくつかのHTML要素を作成する必要があるということです。以下のコードでは、createElement() JavaScriptのメソッドを使用して、他のHTMLを配置できるコンテナ要素を作成します。次に、content動的に作成された要素がプロパティに割り当てられます。結果のコードとスクリーンショットの両方が表示されます。

//Create a div in which to place HTML content
var newElement = document.createElement('div');
//Place data in div
newElement.innerHTML = "<p style='font-size: 1em;'>this is in a paragraph</p><ul><li>in a list</li></ul>";
//Assign element to content
options.content = newElement;

コンテンツのスタイリング

デフォルトでは、モーダルに表示されるテキストは白で、次に示すように左上にあります。

CSSを使用して、テキストの場所とスタイルを変更できます。これを行うには、ModalDialogにクラスを追加し、選択したようにクラスセレクタとスタイルを作成することができます。モーダルのスタイルを設定する手順は、次のとおりです。

プログラムでモーダルにクラスを追加します。.vjs-my-custom-modalこのドキュメントでは使用されていますが、このクラスの名前は何でもかまいません
新しく追加されたクラスと、自動的にモーダルの子となるクラスを使用してスタイルを作成します。このクラスは.vjs-modal-dialog-content、たとえば、次のとおりです。
```
.vjs-my-custom-modal .vjs-modal-dialog-content {
  color: red;
  margin-top: 40px;
  margin-left: 40px;
}
```

上記のスタイルは次のように表示されます。

これは、スタイルを使用するためのコードです。createModal()ヘルパー関数：

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>
</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      const myModal = myPlayer.createModal('In the modal');
      myModal.addClass('vjs-my-custom-modal');
    });
  </script>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      const myModal = myPlayer.createModal('In the modal');
      myModal.addClass('vjs-my-custom-modal');
    });
  </script>

ModalDialogコンストラクタ関数でスタイルを使用するための完全なコードは次のとおりです。

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>

</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        options = {};
        options.content = 'In the  modal';
        options.label = 'the label';

        var ModalDialog = videojs.getComponent('ModalDialog');
        var myModal = new ModalDialog(myPlayer, options);
        myModal.addClass('vjs-my-custom-modal');
        myPlayer.addChild(myModal);
        myModal.open();
    });
  </script>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
    .vjs-my-custom-modal .vjs-modal-dialog-content {
      color: red;
      margin-top: 40px;
      margin-left: 40px;
    }
  </style>

</head>

<body>

  <video-js id="myPlayerID"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/HJLWns1Zbx_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      options = {};
      options.content = 'In the  modal';
      options.label = 'the label';

      var ModalDialog = videojs.getComponent('ModalDialog');
      var myModal = new ModalDialog(myPlayer, options);
      myModal.addClass('vjs-my-custom-modal');
      myPlayer.addChild(myModal);
      myModal.open();
    });
  </script>

ページコンテンツ

ModalDialogの実装

例

ModalDialogの作成

createModal () ヘルパー関数を使用する

ModalDialogコンストラクターの使用

オプションオブジェクト

メソッド

HTML コンテンツを使用する

コンテンツのスタイリング