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();
                }
            }
  • 相关阅读:
    移动应用滑动屏幕方向判断解决方案,JS判断手势方向
    M1808本地配置IP全过程
    嵌入式板子tftpd交叉编译及使用
    七牛云ARM64交叉编译流程
    记录M1808Ubuntu18.04固定IP配置方案
    so库移植记录
    c++ 动态库的编译
    Linux提示Syntax error: end of file unexpected (expecting "then") 提示错误
    ubuntu18.04设置静态ip
    WebFlux中thymeleaf视图找不到的问题解决
  • 原文地址:https://www.cnblogs.com/phyxis/p/5359839.html
Copyright © 2011-2022 走看看