微信小程式自帶的API中的頁面互動功能，雖然提示功能非常全面，但是所有的互動API中是沒有可以自己在提示框中輸入文字的功能，那麼現在我們來自己做這樣的一個提示框（可以帶有輸入功能），在提示框輸入完內容之後，點選確定，可以將文字內容返回，點選取消則可以回到之前的狀態。

（在這裡，主頁面的佈局可以根據每個人的想法來佈局，這裡展示的css之後展示提示框部分的）

1、首先開啟微信開發者工具，建立一個程式碼模板，那麼我們這個提示框就是寫在這個頁面上。

    這裡我們主頁面叫做index

2、在基本頁面中寫上一個姓名的文字，當前姓名用<text>{{stuName}}</text>表示，然後為一個button按鈕，再在js檔案中，建立相應的點選事件以及stuName的資訊。這樣，一個原始頁面就寫好了。

下面我們開始彈出框頁面的製作

<view class='toast-box' hidden='{{!ifName}}'>
        <view class='toastbg'></view>
        <view class='showToast'>
            <view class='toast-title'>
                <text>修改姓名</text>
            </view>
            <view class='toast-main'>
                <view class='toast-input'>
                    <input placeholder='請輸入姓名' bindinput='setValue' data-name='stuEidtName'></input>
                </view>
            </view>
            <view class='toast-button'>
                <view class='button1'>
                    <button catchtap='cancel'>取消</button>
                </view>
                <view class='button2'>
                    <button catchtap='confirm'>確定</button>
                </view>
            </view>
        </view>
    </view>
 

3、我們可以發現，點選按鈕後彈出輸入框，如果點選除取消和確定之外的地方，是不會有反應的。為了做到這個功能，我們用一個絕對位置的渲染層（toastbg），覆蓋住整個頁面，並且如果你的頁面長度沒有滾動的話，請輸入min—height：100vh，如果頁面發生滾動，請把長度控制在height：100%即可看到整個頁面都被覆蓋。並且這個覆蓋的頁面要表現為透明，opacity：0.2，即可

4、bindinput為寫文字時所觸發的事件，data-name為文字資料所儲存的地方，在js中我們可以把這個資料打印出來，會發現我們所輸入的文字資訊。

以下為css的程式碼

.toast-box {
    width: 100%;
    height: 100%;
    opacity: 1;
    position: fixed;
    top: 0px;
    left: 0px;
}

.toastbg {
    opacity: 0.2;
    background-color: black;
    position: absolute;
    width: 100%;
    min-height: 100vh;
}

.showToast {
    position: absolute;
    opacity: 1;
    width: 70%;
    margin-left: 15%;
    margin-top: 40%;
}

.toast-title {
    padding-left: 5%;
    background-color: #2196f3;
    color: white;
    padding-top: 2vh;
    padding-bottom: 2vh;
    border-top-right-radius: 16rpx;
    border-top-left-radius: 16rpx;
}

.toast-main {
    padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: white;
    text-align: center;
}

.toast-input {
    margin-left: 5%;
    margin-right: 5%;
    border: 1px solid #ddd;
    padding-left: 2vh;
    padding-right: 2vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.toast-button {
    display: flex;
}

.button1 {
    width: 50%;
}

.button2 {
    width: 50%;
}

.button1 button {
    width: 100%;
    background-color: white;
    color: red;
    border-radius: 0px;
    border-bottom-left-radius: 16rpx;
}

.button2 button{
    width: 100%;
    background-color: white;
    color: black;
    border-radius: 0px;
    border-bottom-right-radius: 16rpx;
}

.picker {
    padding-top: 1vh;
    padding-bottom: 1vh;
}
 

我們可以根據自己的喜歡，對提示框的樣式進行改變

5、編寫js程式碼，我們需要實現以下一些基本功能（點擊出現彈窗，取消不改變資料值，確定進行判斷資料值，若為空則不能改變，否則可以改變，並且主頁面上的內容要變為相應改變後的內容）

6、給最外層的彈窗附上hidden（如圖所示），為這個值初始為false，點選按鈕後觸發事件，改false為true，這樣即可點擊出現彈窗。

7、為取消按鈕附上點選事件，與hidden的部分剛好相反即可。

8、為書寫文字繫結事件，上述程式碼中命名為setValue，這個函式我們傳入一個event進去，將其列印，我們可以發現在其的detail中有我們剛剛所書寫的內容，我們將這個值，傳給js中data一個屬性，這裡我們命名為edit。

9、為確定繫結事件，用this.data.edit將這個值進行判斷，若為空，我們用wx.showToast提示使用者資訊沒有填寫完整，並且頁面不會改變。若不為空，則我們setData一下我們的stuName為這個edit的值，並且重新把hidden的屬性值改為false。

10、返回到初始頁面我們就可以看到我們自己做得一個提示框，並且具有修改值的功能