zoukankan      html  css  js  c++  java
  • 自助移动端弹窗

      移动端能用alert弹窗么?嘿嘿,自己搞一个。

      function alertdiv(){       
         var alertdiv = $('<div class="overlay" style="z-index: 99999; left: 0px;"><div class="phone-alert"><div class="phone-alert-panel"><div class="phone-alert-content">请填写正确的手机</div><div class="phone-alert-line"></div><a href="javascript:void(0);" class="pbtn" id="confirmTag">确认</a></div></div></div>');
         $("body").append(alertdiv);
         tap($("#confirmTag")[0], function() {
    	$(".overlay").remove();
         });
     }
    

      至于样式大家自己设计一个套一下就可以了。

      效果图如下:

          

      

    .overlay {
         100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }
    
    .phone-alert {
         100%;
        position: absolute;
        z-index: 99999;
        top: 30%;
    }
    
    .phone-alert-panel {
         80%;
        background-color: #FFF;
        border-radius: 0.6em;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 1.5em;
        box-shadow: .1em .4em 0 0 #999;
        overflow: hidden;
    }
    
    .phone-alert-content {
        padding: 2em 2em;
        font-size: 1.3em;
    }
    
    .phone-alert-line {
        border-bottom: 1px #ccc dashed;
        height: 1px;
        margin-bottom: 1.5em;
    }
    
    .pbtn {
        display: inline-block;
        height: 3em;
        line-height: 3em;
        padding: 0 2em;
        background: #11C258;
        border-radius: 0.3em;
        box-shadow: .1em .3em 0 0 #CCC;
        color: #FFF;
        font-weight: 700;
        font-size: 120%;
    }
    

      

      然后这也不算插件啦,写得有所欠缺,还望海涵。

  • 相关阅读:
    Java里的阻塞队列
    ReentrantReadWriteLock读写锁实现分析
    策略模式
    Java线程池技术以及实现
    分布式锁的思路以及实现分析
    Protobuf入门实例
    配置maven环境变量并安装jar包到本地仓库
    nio简单客户端服务端实例
    Java内存模型(JMM)中的happens-before
    Java中锁的内存语义
  • 原文地址:https://www.cnblogs.com/jiangbanji/p/6025984.html
Copyright © 2011-2022 走看看