ModalDialog implementieren

In diesem Thema erfahren Sie, wie Sie die ModalDialog-Komponente von Brightcove Player verwenden.

Beispiel

Das Folgende zeigt ein Beispiel für die ModalDialog-Komponente. In diesem Fall wird das modale Fenster bei der ersten Anzeige des Players angezeigt, es gibt jedoch Methoden, um es auch programmgesteuert anzuzeigen. Hier wird nur etwas gelber Text im modalen Fenster angezeigt. Das modale Fenster blockiert alle Interaktionen mit dem Spieler bis zum X. in der oberen rechten Ecke wird auf geklickt, oder ESC wird gedrückt.

ModalDialog erstellen

Es gibt verschiedene Möglichkeiten, den ModalDialog zu implementieren. Die beiden in diesem Dokument verwendeten sind:

  • Verwenden von createModal() , eine Hilfsfunktion
  • Verwendung der ModalDialog() Konstrukteur

Verwenden der Hilfsfunktion createModal ()

Das createModal() Die Methode kapselt Code, um Ihnen die Verwendung des ModalDialogs zu erleichtern. Die Syntax lautet wie folgt:

createModal(content,options)

Parameter Erforderlich Beschreibung
Inhalt Nein (obwohl, falls nicht angegeben,
nichts wird vom Modal angezeigt)		 Inhalt, der im Modal angezeigt werden soll
Optionen Nein Ein Objekt zum Festlegen anderer Optionen für das Modal. später in diesem Dokument detailliert

Das Folgende zeigt eine einfache Implementierung des ModalDialogs, der mit Brightcove Player erstellt und verwendet wird.

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="HJLWns1Zbx"
    data-embed="default"
    data-application-id=""
    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=""
    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>

Verwenden des ModalDialog-Konstruktors

Sie können auch den Konstruktor der Klasse verwenden, um den ModalDialog zu implementieren. Dies ist ein zweistufiger Prozess, bei dem die Klasse abgerufen und dann ein Objekt instanziiert wird. Die Syntax lautet wie folgt:

var ModalDialog = videojs.getComponent('ModalDialog');
var myModal = new ModalDialog(player, options);
Parameter Erforderlich Beschreibung
Spieler Ja Der Spieler, auf den das Modal angewendet wird
Optionen Nein Ein Objekt zum Festlegen anderer Optionen für das Modal. detailliert im nächsten Abschnitt

Das Folgende zeigt eine Implementierung des ModalDialogs, der mit Brightcove Player erstellt und verwendet wird.

  <video-js id="myPlayerID"
    data-video-id="5079788144001"
    data-account="1507807800001"
    data-player="B1mMJs3Ge"
    data-embed="default"
    data-application-id=""
    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=""
    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>

Das Optionsobjekt

Die folgenden Eigenschaften können Sie als Teil des Optionsobjekts zur Verwendung mit der ModalDialog-Klasse verwenden:

Eigentum Datentyp Standardwert Beschreibung
Inhalt Gemischt (String- oder DOM-Element) Undefiniert Anpassbarer Inhalt, der im Modal angezeigt wird
beschreibung String Undefiniert Eine Textbeschreibung für das Modal, hauptsächlich zur Barrierefreiheit
FüllAlways Boolescher Wert wahr Normalerweise werden Modalitäten erst beim ersten Öffnen automatisch gefüllt. Diese Option weist das Modal an, seinen Inhalt bei jedem Öffnen zu aktualisieren
Etikett String Undefiniert Eine Textbezeichnung für das Modal, hauptsächlich für die Barrierefreiheit
vorübergehend Boolescher Wert wahr Wenn true Das Modal kann nur einmal geöffnet werden. es wird entsorgt, sobald es geschlossen ist
unschließbar Boolescher Wert falsch Wenn true Der Benutzer kann das Modal nicht auf normale Weise über die Benutzeroberfläche schließen. Ein programmgesteuertes Schließen ist weiterhin möglich

Das vorherige Codebeispiel zeigt die Verwendung von options Objekt zum Setzen und Verwenden der content und label Eigenschaften mit einem ModalDialog.

Methoden

Die folgenden Methoden sind Teil der ModalDialog-Klasse:

Methode Beschreibung
schließen () Schließt das Modal
verschließbar() Gibt einen Booleschen Wert zurück, der angibt, ob das Modal geschlossen werden kann oder nicht
beschreibung () Gibt die Beschreibungszeichenfolge für dieses Modal zurück. hauptsächlich für die Zugänglichkeit verwendet
leer () Leert das Inhaltselement. Dies geschieht automatisch jedes Mal, wenn das Modal gefüllt ist
füllen () Füllen Sie das Inhaltselement des Modals mit dem des Modals content Möglichkeit; Das Inhaltselement wird vor dieser Änderung geleert
label () Gibt die Beschriftungszeichenfolge für dieses Modal zurück. hauptsächlich für die Zugänglichkeit verwendet
open () Öffnet das Modal
geöffnet () Gibt einen Booleschen Wert zurück, der angibt, ob das Modal gerade geöffnet ist

Verwenden von HTML-Inhalten

Bis zu diesem Punkt waren die im Modal angezeigten Inhalte einfache Zeichenfolgen. Wenn Sie HTML-Elemente als Inhalt verwenden möchten, müssen Sie einen etwas anderen Ansatz wählen.

Der Schlüssel zur Verwendung von HTML als Inhalt besteht darin, dass Sie ein HTML-Element erstellen müssen, das Sie später dem Inhalt zuweisen. Im folgenden Code JavaScript createElement() Mit dieser Methode wird ein Containerelement erstellt, in das Sie anderen HTML-Code einfügen können. Das dynamisch erstellte Element wird dann dem zugeordnet content Eigentum. Der Code und der Screenshot des Ergebnisses werden angezeigt.

//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;
Verwenden von HTML-Elementen als Inhalt

Styling des Inhalts

Standardmäßig ist der im Modal angezeigte Text weiß und befindet sich oben links, wie hier gezeigt:

Standard-Look von ModalDialog

Sie können die Position und den Stil des Texts mithilfe von CSS ändern. Zu diesem Zweck können Sie dem ModalDialog eine Klasse hinzufügen und nach Belieben eine Klassenauswahl und einen Stil erstellen. Der Prozess zum Stylen des Modals folgt diesen Schritten:

  1. Fügen Sie dem Modal programmgesteuert eine Klasse hinzu. in diesem Dokument .vjs-my-custom-modal wird verwendet, aber Sie können diese Klasse beliebig benennen
  2. Erstellen Sie den Stil mit der neu hinzugefügten Klasse und der Klasse, die automatisch ein untergeordnetes Element des Modals ist. Diese Klasse ist .vjs-modal-dialog-content , beispielsweise: 
    .vjs-my-custom-modal .vjs-modal-dialog-content {
  color: red;
  margin-top: 40px;
  margin-left: 40px;
}

Der oben gezeigte Stil würde wie folgt aussehen:

Gestylter Look von ModalDialog

Hier ist der Code, um einen Stil mit dem zu verwenden createModal() Hilfsfunktion:

<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=""
    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=""
    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>

Hier ist der vollständige Code, um einen Stil mit dem zu verwenden ModalDialog Konstruktorfunktion:

<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=""
    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=""
    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>