zoukankan      html  css  js  c++  java
  • 用 javascript css 编写一个弹框

    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();
                }
            }
  • 相关阅读:
    Git忽略提交规则
    vue-echarts, vue 图表数据处理; axios 跨域代理
    css 画图
    span 空标签 width 设置无效 解决办法
    css 属性备忘录
    js 操作数组的方法 split()
    js 取整,四舍五入 Math.ceil()
    js 强制类型转换 parseInt,parseFloat,number
    dom级别和对应事件级别;事件流
    mac 使用命令行向 github 提交代码
  • 原文地址:https://www.cnblogs.com/phyxis/p/5359839.html
Copyright © 2011-2022 走看看