手机端弹窗页面

手机端页面下图效果如何实现HTML代码jQuery WeUImeta namedescription contentWrite an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. link relstylesheet hrefweui/lib/weui.min.css link relstylesheet hrefweui/css/jquery-weui.css link relstylesheet hrefcss/yaopinzhuisu.css磷酸哌嗪宝塔糖生产厂家广西南宁百会药业集团有限公司规格瓶24粒药品详情药品验证此码为首次查询首次查询时间2019年08月25日有效期至2020-11-30距有效期还有15个月6天请放心使用药品信息核对对比关键信息是否和药盒上一致家庭过期药是有害垃圾免费上门回收 领常备药优惠券用药指导用法用量口服1-3岁蛔虫病5-7粒蛲虫病3粒div idchoice styledisplay: none div classmask /div div classfloat-top img srcimages/3.png p请将以下信息和药盒信息比对是否一致一致的信息是正品的必要条件/p div classmid-1 div classmid-1-left/div div生产批号1812159/div /div div classmid-1 div classmid-1-left/div div生产厂家广西南宁百会药业集团有限公司/div /div div classmid-1 div classmid-1-left/div div批准文号国药准字H45020643/div /div div classmid-1 div classmid-1-left/div div生产日期2018-12-08/div /div div classfloat-bom div classlefta href#异常反馈/a/div div classrigfta href#确定一致/a/div /div div classhide-mask onclickhide_mask(); img srcimages/chahao.png alt/ /div /div /divjQuery WeUImeta namedescription contentWrite an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. link relstylesheet hrefweui/lib/weui.min.css link relstylesheet hrefweui/css/jquery-weui.css link relstylesheet hrefcss/yaopinzhuisu.css磷酸哌嗪宝塔糖生产厂家广西南宁百会药业集团有限公司规格瓶24粒药品详情药品验证此码为首次查询首次查询时间2019年08月25日有效期至2020-11-30距有效期还有15个月6天请放心使用药品信息核对对比关键信息是否和药盒上一致家庭过期药是有害垃圾免费上门回收 领常备药优惠券用药指导用法用量口服1-3岁蛔虫病5-7粒蛲虫病3粒div idchoice styledisplay: none div classmask /div div classfloat-top img srcimages/3.png p请将以下信息和药盒信息比对是否一致一致的信息是正品的必要条件/p div classmid-1 div classmid-1-left/div div生产批号1812159/div /div div classmid-1 div classmid-1-left/div div生产厂家广西南宁百会药业集团有限公司/div /div div classmid-1 div classmid-1-left/div div批准文号国药准字H45020643/div /div div classmid-1 div classmid-1-left/div div生产日期2018-12-08/div /div div classfloat-bom div classlefta href#异常反馈/a/div div classrigfta href#确定一致/a/div /div div classhide-mask onclickhide_mask(); img srcimages/chahao.png alt/ /div /div /divCSS代码 * { padding: 0px; margin: 0px; }.top-images img {width: 100%;height: 232px;}.top-images-style {height: 232px;top: 0px;left: 0px;}.top-images {position: relative;z-index: 0;}.mid {width: 100%;border-radius: 5px 5px 0px 0px;position: absolute;z-index: 9;background-color: #FFFFFF;top: 180px;left: 0;}.mid h3 {font-size: 20px;margin-top: 18px;margin-left: 15px;}.mid p {color: grey;margin-top: 3px;margin-left: 15px;}.mid .p3 {color: #3C3F41;}.mid img {margin-top: 16px;margin-left: 9px;}.mid .test {margin-top: 16px;text-align: center;}.mid-first {width: 57px;height: 57px;border-radius: 5px;background-color: #4B7929;float: left;}.mid-first .mid-first-picture {width: 40px;height: 38px;margin-top: 10px;margin-left: 8px;}.pile-test {width: 350px;height: 60px;margin-top: 15px;margin-left: 15px;}.mid-first-left .title {font-size: 17px;font-weight: normal;margin-left: 68px;}.mid-first-left .wenzi {margin-left: 68px;}.mid-first-third {width: 57px;height: 57px;border-radius: 5px;background-color: #0074E8;float: left;}.mid-first-third .mid-first-picture {width: 40px;height: 38px;margin-top: 10px;margin-left: 8px;}.laji {width: 330px;height: 80px;margin-left: 15px;margin-top: 10px;}.laji .laji-left-top {width: 232px;height: 75px;float: left;}.laji-right {width: 92px;height: 77px;float: right;}.laji-right img {width: 90px;height: 70px;}.bottom {width: 100%;margin-top: 27px;text-align: center;margin-bottom: 25px;}.bottom .fangfa {width: 80px;height: 25px;border: 1px solid dodgerblue;margin-left: 15px;border-radius: 15px;margin-top: 20px;}.bottom .fangfa p {color: dodgerblue;margin-left: 4px;margin-top: 1px;}.bottom .bom {margin-left: -74px;margin-top: 10px;}.mask {opacity: 0.7;position: absolute;z-index: 12;top: 0;left: 0;height: 100%;width: 100%;background: black;margin-top: 100px;}.float-top {width: 300px;height: 330px;border: 1px solid #ccc;border-radius: 5px;position: absolute;z-index: 9999;margin-top: 84px;margin-left: 36px;background: white;}.float-top img {width: 100%;height: 80px;}.float-top p {margin-left: 15px;color: grey;}.float-top .mid-1 {width: 280px;height: 20px;margin: 10px 15px;font-size: 13px;}.mid-1-left {width: 5px;height: 5px;border-radius: 4px;margin: 10px 5px;float: left;}.float-top .float-bom {width: 250px;height: 40px;margin: 20px auto;}.float-bom .left {float: left;}.float-bom .left {float: right;}.float-bom a{color: grey;}.hide-mask{margin: 20px auto 0px auto;width:64px;height: 64px;}.hide-mask img{width:64px;height: 64px;}.pile-test a{color: black;}希望可以帮助大家~~~