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(); }); }
  • 相关阅读:
    trim标签:可以自定义字符串的截取规则
    登录框(用获取value值方法)
    C++在ARM Linux下的交叉编译
    happybase导入报错:thriftpy.parser.exc.ThriftParserError: ThriftPy does not support generating module with path in protocol 'c'
    Nginx报错总结
    ubuntu安装Nginx
    mqtt在debian strench 9 docker环境下的搭建
    evokly/kafka-connect-mqtt 不支持kafka集群部署
    树莓派mqtt安装
    kafka和mqtt的区别和联系
  • 原文地址:https://www.cnblogs.com/feiye512/p/5258009.html
Copyright © 2011-2022 走看看