ionic ionicPopup 自定義彈窗

2021-10-12 20:57:19 字數 2060 閱讀 7817

ionic 彈窗寫法

上述鏈結所講的彈窗內容模板是官網固定寫好的,有時就不滿足自己專案所需,官網介紹了乙個屬性,可以自定義彈窗內容

templateurl

所引用 彈窗內容的 html檔案位址

//彈窗

var confirmpopup =

$ionicpopup.confirm(

)confirmpopup.then(function(res)

, function()

, updateurl

)}}else})

;

下面以angular舉例

tab-privacyagree.html

<

!doctype html>

"en"

>

"starter" ng-controller=

"privacyagreecontroller"

>

"yinsandfuw" ng-if=

'serveandprivacy'

>

"title"

>服務協議與隱私協議

"yinsp"

>歡迎使用前,請認真閱讀"yinsfuw" ng-click=

"serveclick()"

>《服務協議》和"yinsfuw" ng-click=

"privacyclick()"

>《隱私協議》全部條款。我們非常重視您的使用者權益與個人資訊的保護,我們將通過上訴協議向你說明我們如何為你提供服務並保障你的使用者權益,如你同意,「同意並繼續」接受我們的服務。

"yinsandfuw" ng-if=

'isserve'

>

"title"

>

'goback()' class=

"jiantback"

>

服務協議

"yinsp"

>

服務協議的確認和接納

"yinsandfuw" ng-if=

'isprivacy'

>

"title"

>

'goback()' class=

"jiantback"

>

隱私協議

"yinsp"

>

privacyagreecontroller.js

'privacyagreecontroller', function(

$scope

) //服務協議

$scope.serveclick = function(

) //隱私協議

$scope.privacyclick = function(

) //

$scope.goback = function()}

);css

.agreemain

.yinsandfuw

.yinsandfuw .title

.yinsandfuw .title .jiantback

.yinsandfuw .yinsp

.yinsandfuw .yinsp p

.yinsandfuw .yinsp .yinsfuw

/* 隱私協議彈窗 */

/* 這是這個popup的樣式名,可以修改popup confim框的大小、背景色等; */

.new_confirm .popup

/* 標題樣式 */

.new_confirm .popup-head

/* 內容樣式,比如字型大小等 */

.new_confirm .popup-body

/* 底部按鈕的樣式 */

.new_confirm .popup-buttons

.new_confirm .button-default

.new_confirm .button-positive

自定義彈框

1.警告框 設定乙個negativebutton builder.setnegativebutton 取消 new dialoginte ce.onclicklistener 設定乙個neutralbutton builder.setneutralbutton 忽略 new dialoginte c...

ionic 自定義彈框

在工作過程中往往需要自定義的彈框。因此,將內容整理如下,以方便學習。若有不當之處,敬請斧正!思路 ionicpopup.show div class form content class input name input1 div class input area type number place...

自定義彈框實現

在父頁面的父級資料夾下建components檔案 在components下建彈框的內容的頁面 比如頁面a 裡面寫彈框的內容和樣式 事件等 用import把 a頁面匯入你需要彈框的頁面 也就是父頁面 然後在父頁面中註冊元件 引入watch 第乙個addchildinfo指的是store下面的addch...