サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    ModalDialogの実装

    このトピックでは、以下のModalDialogコンポーネントの使用方法を学習します。 Brightcove Player.

    例

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

    プロパティ データ・タイプ デフォルト値 説明
    コンテンツ 混合（文字列または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;
    HTML要素をコンテンツとして使用する

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

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

    ModalDialogのデフォルトの外観

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

    1. プログラムでモーダルにクラスを追加する。 この文書では .vjs-my-custom-modal が使用されますが、このクラスの名前は任意に指定できます
    2. 新しく追加されたクラスと自動的にモーダルの子であるクラスを使用してスタイルを作成します。 このクラスは .vjs-modal-dialog-contentたとえば、次の 
      .vjs-my-custom-modal .vjs-modal-dialog-content {
  color: red;
  margin-top: 40px;
  margin-left: 40px;
}

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

    ModalDialogのスタイル付きの外観

    ここでは、スタイルを 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>
    ページの最終更新日：28年2020月XNUMX日