用 javascript css 编写一个弹框

Posted 2020-07-05 phyxis_xu

CSS代码：

.pop_box_2{display: none; position: fixed; left: 43%; top: 35%; margin-left: -225px; margin-top: -137px; width: 780px; min-height: 274px; background: #fff; border: 1px solid #107fae; z-index: 2;}
.pop_box_2 .title{margin:0 auto;width: 100%; padding-top: 3px;hight:15px;}
.pop_box_2 .title span{display: block; width: 100px; height: 16px; margin:0 auto; font-size:20px;}
.pop_box_2 .close_pop_1{display: block;position: absolute; right: 0px; top: 0px; width:24px; height: 24px; background:#07ad7d url(../images/close_pop.png) no-repeat center center; cursor: pointer;}
.pop_box_2 .close_pop_1:hover{ opacity: .9}

 

javascript代码：

function moveToGen(app){
            var h = $("body").height();
            $(".pop_bg").css("height",h+"px");
            $(".pop_bg").show();
            $("#downUrl").val($(app).parents("tr").find("td:first").text());
            $(".pop_box_2").append("<span class=‘close_pop_1‘ onclick=‘closepop();‘></span>");
            $(".pop_box_2").show();
        }
         function closepop(){ 
            $(".errorMsg").children().remove();
            $("#downUrl").val("");
            $(".pop_bg").hide();
            $(".pop_box_2").hide();
        }

html 代码：

    <div class="pop_bg"></div>            
    <div class="pop_box_2" id="pop_box_2">
    <br/>
    <br/>
        <div class="title"><span>移入正版</span></div>
        <div class="errorMsg" id="errorMsg" ></div>
    <br/>
    <br/>
        <div class="app_downUrl" id="app_downUrl">
        
            <form id="appMsg" action="/moveToGen" method="post">
                <table class="jm_table" cellpadding="0" cellspacing="0">
                    <tr class="table_tit">
                        <td width="18%">下载地址:</td>
                        <td><input type="text" id="downUrl" name ="downUrl" placeholder="请输入下载地址"  size="60" onchange="check(this,‘请输入下载地址！‘);"/></td>
                    </tr>
                </table>
                <br/>
                
            </form>
        </div>
        <div class="save"><img class="savebtn" src="/detect/images/save.png" onclick="save();"/></div>
        <br/>
    </div>

 错误提示代码：

    function check(name,msg){
            if(name.value==""){
                $(".errorMsg").children().remove();
                $(".errorMsg").html("<span >"+msg+"</span>");
                return;
            }else{
                $(".errorMsg").children().remove();
            }
        }