ModalDialogの実装

例

以下は、ModalDialogコンポーネントの例を示しています。この場合、モーダルウィンドウは最初に表示されます player 表示しますが、プログラムで表示するメソッドも存在します。ここでいくつかの黄色のテキストは、モーダルウィンドウに表示されるすべてです。モーダルウィンドウは、 player まで X 右上隅のをクリックするか、または ESC が押された。

ModalDialogの作成

ModalDialogを実装する方法はいろいろありますが、この2つは以下の通りです：

使い方 createModal()、ヘルパー関数
使い方 ModalDialog() コンストラクタ

createModal（）ヘルパー関数の使用

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

createModal(content,options)

パラメーター	必須	説明
コンテンツ	いいえ（提供されていない場合でも、モーダルによって何も表示されません）	モーダルで表示するコンテンツ
オプション	いいえ	モーダルの他のオプションを設定するオブジェクト。このドキュメントの後半で詳しく説明します

以下は、ModalDialogの簡単な実装を示しています。 Brightcove Player.

  <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);

パラメーター	必須	説明
player	はい	player モーダルが適用される
オプション	いいえ	モーダルの他のオプションを設定するオブジェクト。次のセクションで詳しく説明します

以下は、ModalDialogの実装を示しています。 Brightcove Player.

  <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クラスで使用するoptionsオブジェクトの一部として使用できるプロパティです。

プロパティ	データ・タイプ	デフォルト値	説明
コンテンツ	混合（文字列またはDOM要素）	未定義	モーダルに表示されるカスタマイズ可能なコンテンツ
説明	文字列	未定義	主にアクセシビリティのためのモーダルのテキスト記述
fillAlways	ブーリアン	true	通常、モーダルは最初に開いたときにのみ自動的に埋められます。このオプションは、モーダルが開くたびに内容をリフレッシュするようにモーダルに指示します
ラベル	文字列	未定義	主にアクセシビリティのためのモーダルのテキストラベル
一時的	ブーリアン	true	If `true` モーダルは一度しか開くことができません。それが閉じられるとすぐに処分されます
uncloseable	ブーリアン	false	If `true` ユーザーは通常の方法でUIを通してモーダルを閉じることができません。プログラムによる閉鎖はまだ可能です

前のコードサンプルは、 options 設定して使用するオブジェクト content 更に label ModalDialogでのプロパティ

メソッド

次は、ModalDialogクラスの一部であるメソッドです。

方法	説明
閉じる（）	モーダルを閉じる
closeable（）	モーダルが閉じるかどうかを反映するブール値を返します。
description（）	このモーダルの記述文字列を返します。主にアクセシビリティに使用されます
空の（）	content要素を空にします。これは、モーダルが満たされると自動的に発生します
fill（）	モーダルのコンテンツ要素をモーダルで埋めます。 `content` オプション; この変更が行われる前にコンテンツ要素が空になります
ラベル（）	このモダールのラベル文字列を返します。主にアクセシビリティに使用されます
開いた（）	モーダルを開く
開いた（）	モーダルが現在開かれているかどうかを示すブール値を返します。

HTMLコンテンツの使用

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

HTMLをコンテンツとして使用するには、後でコンテンツに割り当てるHTML要素を作成する必要があります。以下のコードでは、JavaScriptの createElement() メソッドを使用して、他の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コンテンツの使用

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