modal-dialog(模态对话框)

使用模态对话框组件

该ModalDialog组件是Video.js核心的一部分,并提供了用于完整播放器覆盖的内置UI。


创建一个ModalDialog

除了内置的Video.js组件创建方法外,播放器还包括一个createModal()辅助方法。

我们将在本文档中演示这两种方法,方法是创建一个modal,该modal在播放器暂停时打开,并在播放器关闭时恢复播放。

使用示例 createModal()

该createModal()方法旨在创建一次性打开的模态,该模态需要出于某种临时目的而打开。因此,它们在创建时立即打开自己,并且默认情况下在关闭时立即处置自己。

var player = videojs('my-player');

player.on('pause', function() {

  // Modals are temporary by default. They dispose themselves when they are
  // closed; so, we can create a new one each time the player is paused and
  // not worry about leaving extra nodes hanging around.
  var modal = player.createModal('This is a modal!');

  // When the modal closes, resume playback.
  modal.on('modalclose', function() {
    player.play();
  });
});

该createModal()方法还带有第二个参数-包含模态选项的对象。有关完整的选项集,请参阅API文档

使用ModalDialog构造函数的示例

与使用createModal()不同,使用任何通用组件创建方法创建的modal在默认情况下都不会打开。这使得这种方法更适合于那些可能无限期驻留在DOM中的modal。

var player = videojs('my-player');
var ModalDialog = videojs.getComponent('ModalDialog');

var modal = new ModalDialog(player, {

  // We don't want this modal to go away when it closes.
  temporary: false
});

player.addChild(modal);

player.on('pause', function() {
  modal.open();
});

player.on('play', function() {
  modal.close();
});
就用户体验而言,这两个示例都是等效的。实现者应使用更适合其用例的方式。


独立地设置样式

modal的一个普遍需求是设置独立样式。推荐的方法是将自定义类添加到您的模态中,并使用CSS定位该类:

modal.addClass('vjs-my-fancy-modal');


上一篇:middleware(中间件) 下一篇:options(选项)