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(); }); }
  • 相关阅读:
    固定表头的table
    Object.assign()方法
    一个命令解决linux重启nginx就丢失pid文件问题
    js-xlsx 一个实用的js 导出列表插件
    SparkSQL执行时参数优化
    HSQL转化为MR过程
    简单写下提交sql-map-shuffle-reduce的过程
    order by/sort by/distribute by /cluster by 的区分
    hive中如何控制mapper的数量
    hive 窗口和分析函数功能
  • 原文地址:https://www.cnblogs.com/feiye512/p/5258009.html
Copyright © 2011-2022 走看看