弹框居中

108 阅读1分钟

第一种:小程序 image.png

<view class="up">
    <view class="up_main">
      <image src="/img/del.png" class="up_del" bindtap="del"></image>
      <view class="up_title">公司注册起名</view>
      <view class="up_inpbox">
        <image src="/img/sosuo.png" class="up_sosuo"></image>
        <input type="text" placeholder="好顺佳" bindinput="nameinp" value="{{name}}"/>
      </view>
      <view class="up_inpbox">
        <image src="/img/mobile.png" class="up_mobile"></image>
        <input type="text" placeholder="请输入您的手机号码" bindinput="phoneinp" maxlength="11"/>
      </view>
      <view class="up_font">*请输入真实的有效手机号码才能收到核名结果</view>
      <view class="up_btn" bindtap="submit">立即查询</view>
    </view>
  </view>
  

小程序样式

  .up {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      background: rgba(0, 0, 0, .3);
      z-index: 999;
    }

    .up_main {
      width: 640rpx;
      height: 440rpx;
      background-color: #2373d9;
      border-radius: 30rpx;
      position: relative;
      left: 0;
      right: 0;
      top: 29%;
      margin: auto;
      padding: 50rpx 0;
    }
    

第二种:pc

<div class="tk_box">
        <img src="img/index_tk.png" alt="" class="tkimg">
        <img src="img/del.png" alt="" class="del_img">
        <button onclick="openChat()">立即免费咨询</button>
    </div>
    

pc样式

   .tk_box{position: fixed;z-index: 99999999;left: 50%;transform: translate(-50%,-100%);}