微信小程序自定義彈窗/彈出層功能，非官方api，自寫(xiě)

ranwu 發(fā)布于2019-08-23 12:14 / 3208人閱讀

摘要：遮罩層彈出層二維碼或其他圖片這里是文本描述，可以查看修改樣式好的彈窗外面的按鈕遮罩層彈出層彈出層里面的圖片彈出層里面的按鈕彈出層里面的文字外面的彈窗禁止屏幕滾動(dòng)彈出層里面的彈窗

index.wxml







    
    這里是文本描述，可以查看css修改樣式
    好的

彈窗

index.wxss

/**index.wxss**/
/* 外面的按鈕 */
.btn{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px; 
}

/* 遮罩層 */
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.5;
}
 
/* 彈出層 */
.modalDlg{
    width: 70%;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 9999;
    margin: 0 auto;
    background-color: #fff;
    border-radius:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 彈出層里面的圖片 */
.modalDlg image{
  width: 120px;
  height: 120px;
  margin-top: 30px;
}

/* 彈出層里面的按鈕 */
.ok{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px;
}

/* 彈出層里面的文字 */
.text{
  text-align: justify;
  font-size: 14px;
  color: #666;
  width: 180px;
  margin-top: 10px;
}

index.js

Page({
  data: {
    showModal: false
  },

  // 外面的彈窗
  btn: function () {
    this.setData({
      showModal: true
    })
  },

  // 禁止屏幕滾動(dòng)
  preventTouchMove: function () {
  },

  // 彈出層里面的彈窗
  ok: function () {
    this.setData({
      showModal: false
    })
  }

})

TANKING
2018-10-7
HTTP://LIKEYUNBA.COM

GPU云服務(wù)器云服務(wù)器微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序api接口

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98168.html

相關(guān)文章

小程序練習(xí)，仿bilibili小程序

摘要：微信小程序?qū)W習(xí)仿嗶哩嗶哩制作的小程序待完善項(xiàng)目預(yù)覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來(lái)了一場(chǎng)大革命。微信小程序?qū)W習(xí) ?仿嗶哩嗶哩制作的小程序（待完善）項(xiàng)目預(yù)覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

2shou 2019-08-20 18:24 評(píng)論0 收藏0
小程序練習(xí)，仿bilibili小程序

摘要：微信小程序?qū)W習(xí)仿嗶哩嗶哩制作的小程序待完善項(xiàng)目預(yù)覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來(lái)了一場(chǎng)大革命。微信小程序?qū)W習(xí) ?仿嗶哩嗶哩制作的小程序（待完善）項(xiàng)目預(yù)覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

longshengwang 2019-08-29 13:02 評(píng)論0 收藏0
小程序練習(xí)，仿bilibili小程序

摘要：微信小程序?qū)W習(xí)仿嗶哩嗶哩制作的小程序待完善項(xiàng)目預(yù)覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發(fā)現(xiàn)了它竟然帶來(lái)了一場(chǎng)大革命。微信小程序?qū)W習(xí) ?仿嗶哩嗶哩制作的小程序（待完善）項(xiàng)目預(yù)覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

yedf 2019-08-01 17:16 評(píng)論0 收藏0
記錄微信小程序的坑

摘要：除官方外的參考文章微信小程序?qū)嵗齽?chuàng)建下發(fā)模板消息實(shí)例手把手教你開(kāi)發(fā)微信小程序之模版消息開(kāi)發(fā)教你突破小程序模板消息的推送限制獲取用戶(hù)信息接口的廢棄問(wèn)題接口是獲取用戶(hù)信息昵稱(chēng)，頭像等的接口，在官方文檔上寫(xiě)是即將廢棄。 ----------------更新-------------- 2018年10月10日官網(wǎng)3個(gè)接口廢棄的通知： 1、分享監(jiān)聽(tīng)接口分享消息給好友時(shí)，開(kāi)發(fā)者將無(wú)法從callba...

EastWoodYang 2019-08-23 12:02 評(píng)論0 收藏0
潛在的惡意：前端彈窗類(lèi)組件的鍵盤(pán)操作

摘要：而當(dāng)用戶(hù)使用鍵盤(pán)操作，焦點(diǎn)發(fā)生變化后，當(dāng)前焦點(diǎn)在哪一項(xiàng)上，必須給出明確的視覺(jué)提示，否則極容易帶來(lái)困難，甚至誤操作?；剀?chē)鍵按下時(shí)，則會(huì)到相應(yīng)賬號(hào)，或者取消操作關(guān)閉彈出層。再來(lái)看看組件庫(kù)的組件中的確認(rèn)消息。本文作者:文藺原文地址:http://www.wemlion.com/2016/a...本文由 @文藺創(chuàng)作，轉(zhuǎn)載請(qǐng)保留此聲明。所有權(quán)利保留，請(qǐng)勿用于商業(yè)目的。問(wèn)題提出需要說(shuō)明的是...

tinylcy 2019-08-22 10:46 評(píng)論0 收藏0