• JS弹窗带遮蔽的功能


    很不错的JS原生自定义弹窗,很实用!

    function myAlert(str,click,useCancel){
        var overflow="";
        var $hidder=null;
        var clickHandler=click||$.noop;
        var myClickHandler=function(){
            $hidder.remove();
            $("body").css("overflow",overflow);
            clickHandler($(this).html()=="确定");
        };
        var init=function(){
            $hidder = $("<div style='100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;text-align: center;position:fixed;left:0;top:0;'></div>");
            var $myalert = $("<div style='300px;position:absolute;top:30%;left:50%;margin-left:-150px;padding:20px;background:#fff;border-radius:5px;'>"+
                "<div style='padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-size:20px;color:#f83;'>温馨提示</div></div>")
                .appendTo($hidder);
            $("<div style='padding:10px 0;color:#333;border-bottom:1px solid #e5e5e5;'>"+str+"</div>").appendTo($myalert);
            var $myalert_btn_div = $("<div style='padding-top:10px;'></div>").appendTo($myalert);
            var $okBtn = $("<div style='float:left;100%;color:#eee;border-radius:2px;padding:7px 0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;' class='bluebg1'>确定</div>")
                .appendTo($myalert_btn_div).click(myClickHandler);
            if(useCancel){
                $okBtn.css({"width":"50%","border-right":"5px solid #fff"});
                $("<div style='float:left;50%;border-left:5px solid #fff;border-radius:2px;padding:7px 0;color:#fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#ccc;'>取消</div>")
                .appendTo($myalert_btn_div).click(myClickHandler);
            }
            overflow=$("body").css("overflow");
            $("body").css("overflow","hidden").append($hidder);
        };
        init();
    }

    调用的时候就很简单啦(注意:需要引用一下jquery包)

    $("button").click(function(){
        myAlert("是否跳转到百度页面?",function(f){
            if(f){
                window.open("http://www.baidu.com");
            }
        },true);
    })
  • 相关阅读:
    Ansys Maxwell2——二维电磁场理论和有限元基础
    Ansys Maxwell在工程电磁场中的应用1——二维分析技术
    第四章 栈
    第三章 链表
    第二章 队列
    第三章 操作系统用户界面总结
    第一章 逻辑结构与物理结构
    Linux-Mint的一些配置经验
    docker安装zookeeper的使用说明
    SpringCloud初体验-使用Eureka进行服务注册和发现
  • 原文地址:https://www.cnblogs.com/BraveBoy/p/7542859.html
Copyright © 2020-2023  润新知