Framework7学习笔记之 常用弹窗(Modal)

一：弹窗

Modal 是从App的主要内容区域上弹出的一小块内容块，经常被用来向用户询问信息，通知或警告用户。

弹窗一般在js中定义，通过api，设定弹窗的标题、内容、点击回调函数。

二：Alert

最简单的弹窗，用于提示或警告，只有一个ok选项。

$$(‘.alert-text-title-callback‘).on(‘click‘, function () {
    myApp.alert(‘提示内容‘, ‘弹窗标题‘, function () {
        选项点击回调函数。
    });
});
 

三：Confirm

确认弹窗，用于确认某些操作，有 ok、cancel两个选项。

$$(‘.confirm-title-ok-cancel‘).on(‘click‘, function () {
    myApp.confirm(‘提示信息‘, ‘弹窗标题‘,
      function () {
        点击ok选项的回调函数
      },
      function () {
        点击cancel选项的回调函数
      }
    );
}); 

四：Prompt

输入弹窗，用于提醒用户输入一些数据。

$$(‘.prompt-title-ok-cancel‘).on(‘click‘, function () {
    myApp.prompt(‘弹窗信息‘, ‘弹窗标题‘,
      function (value) {
       ok选项回调函数，value是输入值
      },
      function (value) {
        cancel选项回调函数，value是输入值
      }
    );
}); 

五：indicator

指示器，用于在执行一些耗时操作时作提示用。

$$(‘.open-indicator‘).on(‘click‘, function () {
    myApp.showIndicator();//显示指示器
    setTimeout(function () {
        myApp.hideIndicator();
    }, 延时时间); //延时关闭
});

六：自定义弹窗

自定义弹窗可以：自定义标题、文本、按钮数量以及各个按钮的点击函数。

【其中，标题、文本可以用html字符串来实现样式，如：tab效果等】

$$(‘.open-3-modal‘).on(‘click‘, function () {
  myApp.modal({
    title:  ‘标题‘,
    text: ‘内容‘,
    buttons: [
      {
        text: ‘按钮文本‘,
        onClick: function() {
          点击事件函数
        }
      },
    ...
    ]
  })
});

原文地址：https://www.cnblogs.com/ygj0930/p/8457546.html