微信小程序 彈框和模態(tài)框?qū)崿F(xiàn)代碼
更新時間：2017年03月10日 11:03:07 投稿：lqh
這篇文章主要介紹了微信小程序 彈框和模態(tài)框?qū)崿F(xiàn)代碼的相關資料,需要的朋友可以參考下
微信小程序 彈框和模態(tài)框?qū)崿F(xiàn)代碼
實現(xiàn)效果圖：
實現(xiàn)代碼：
<view class="wxapp-modal" style="{{modal_style}}">
<view class="content">
</view>
<view class="mask" bindtap="closeModal"></view>
</view>
/*模態(tài)框*/
.wxapp-modal{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index:999;
}
.wxapp-modal .content{
width: 100%;
bottom: 10px;
text-align: center;
position: absolute;
}
.wxapp-modal .content .header{
margin: auto;
width: 93%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #FFFFFF;
position: relative;
z-index:9999;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: 1px #eee solid;
}
.wxapp-modal .content .body{
margin: auto;
width: 93%;
background-color: #FFFFFF;
position: relative;
z-index:9999;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
}
.wxapp-modal .content .footer{
margin: auto;
width: 93%;
height: 60px;
line-height: 60px;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
border-radius: 8px;
margin-top: 10px;
text-align: center;
}
.wxapp-modal .content .footer button{
display: inline-block;
width: 49%;
height: 60px;
line-height: 60px;
background-color: #FFFFFF;
margin-left: 0px;
}
.wxapp-modal .content .footer button:active{
background-color: #eee;
}
.wxapp-modal .content .footer button::after{
content:none;
}
.wxapp-modal .content .footer .cancel{
color: #fa5b43;
border-right: 1px #eee solid;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.wxapp-modal .content .footer .confirm{
color: #1ed3fa;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.wxapp-modal .mask{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-color:rgba(0,0,0,0.5);
}
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要為大家介紹了js前端圖片加載異常兜底方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
JS前端使用canvas動態(tài)繪制函數(shù)曲線示例詳解
這篇文章主要為大家介紹了JS前端使用canvas畫函數(shù)曲線的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
VSCode多行注釋插件KoroFileHeader使用示例
這篇文章主要為大家介紹了VSCode多行注釋插件KoroFileHeader使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
理解js中原型、原型鏈這個概念，絕對是幫助我們更深入學習js的必要一步，比如，如果js開發(fā)者想理解js繼承，new關鍵字原理，甚至封裝組件、優(yōu)化代碼，弄明白js中原型、原型鏈更是前提條件。本篇文章，用最簡潔的文字，清楚明白講解原型鏈相等關系和原型、原型鏈存在的意義2021-09-09
JavaScript復原何同學B站頭圖細節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復原何同學B站頭圖細節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 跳轉(zhuǎn)方式總結(jié)的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript執(zhí)行機制，想要搞懂JavaScript執(zhí)行機制，便與進程與線程的概念脫不了干系，下面我們就來看看這JavaScript執(zhí)行機制的具體介紹吧,需要的朋友可以參考一下2021-12-12
這篇文章主要介紹了微信小程序 生命周期函數(shù)的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 122100版本更新問題解決方案的相關資料,這里對微信小程序版本更新該如何解決提供解決方案，需要的朋友可以參考下2016-12-12
Electron?網(wǎng)絡攔截實戰(zhàn)示例詳解
這篇文章主要為大家介紹了Electron?網(wǎng)絡攔截實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03