用 javascript css 編寫一個彈框

來源:互聯網
上載者:User

標籤:

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();            }        }

 

用 javascript css 編寫一個彈框

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.