一：彈窗

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() {
          點擊事件函數
        }
      },
    ...
    ]
  })
});

Framework7學習筆記之 常用彈窗(Modal)