zoukankan      html  css  js  c++  java
  • html 通用 遮罩弹出层 弹出后 支持跳转页面

    //showMessage 提示的内容默认为空必填   buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认  url:跳转链接  传入""为默认  不跳转
    function
    showAlert(showMessage,buttonText,url) { var bottonHtml=""; if(url=="") { bottonHtml="<div class='qr_btn' style='80%;font:15px/35px "微软雅黑";background:#94c120;color:#fff;margin:0 auto;border-radius: 6px;'>"+(buttonText==""?'确定':buttonText)+"</div>"; } else { bottonHtml="<div class='qr_btn' style='80%;font:15px/35px "微软雅黑";background:#94c120;color:#fff;margin:0 auto;border-radius: 6px;'><a href='"+url+"'>"+(buttonText==""?'确定':buttonText)+"</a></div>" } var html="<div class='alert_win' style='display:none;80%;display:none;padding-bottom:16px;position:absolute;z-index: 9999;text-align: center;border-radius:10px;background:#fff;border:1px solid #c6c6c6;left:50%;top:50%;'>"+ "<div class='til' style='font: 16px/24px 微软雅黑; 80%; margin: 20px auto 18px;'>"+showMessage+"</div>"+ bottonHtml+ "<div class='close_btn' style='16px;height:16px;font:bold 15px/16px airal;color:#999;position:absolute;top:5px;right:5px;background:none;'>×</div>"+ "</div>"+ "<div class='alert_bg' style='100%;height:100%;position:fixed;background:rgba(0,0,0,0.3);top:0;left:0;display: none;'></div>"; $("body").append(html); var oT_1=($('.alert_win').height())/2; var oL_1=($('.alert_win').width())/2; $('.alert_win').css({ 'marginTop':-oT_1+'px', 'marginLeft':-oL_1+'px' }); //$('.til').html(showMessage); $('.alert_win').show(); $('.alert_bg').show(); //qr_btn 关闭 $('.qr_btn').click(function() { $('.alert_win').hide(); $('.alert_bg').hide(); }); //down_app 关闭 $('.down_app').click(function(){ $('.alert_win').hide(); $('.alert_bg').hide(); }); $('.close_btn').click(function(){ $('.alert_win').hide(); $('.alert_bg').hide(); }); }
  • 相关阅读:
    Gin框架系列02:路由与参数
    Gin框架系列01:极速上手
    Go语言库系列之email
    Go语言库系列之aurora
    Go语言库系列之dotsql
    Go语言库系列之flag
    Go解算法07整数反转
    Go语言micro之快速搭建微服务
    理解Golang组件protobuf
    理解Go语言组件flag
  • 原文地址:https://www.cnblogs.com/feiye512/p/5258009.html
Copyright © 2011-2022 走看看