用 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();
            }
        }
时间: 2024-08-26 16:32:26

用 javascript css 编写一个弹框的相关文章

自己封装一个弹框插件

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示-面试题

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示. html <textarea name="" id="text" cols="30" rows="10" maxLength=10></textarea><br> <span id="span"></span> javascript var str = docum

如果exclipe中Java视图中Consol跑偏了单独形成一个弹框怎么办?

问题如图: 不和其他的在同一窗体中,而且拖动也拖不进去,则是使用以下方法: 点击工具栏上的Window--->点击Reset Perspective...这样就可以解决了. 如果exclipe中Java视图中Consol跑偏了单独形成一个弹框怎么办?,布布扣,bubuko.com

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35); 

做一个弹框玩玩,顺便熟悉最近新学习的插件封装技术

先上图,没图不成席 [原因]由于公司从开发到现在时间都比较紧张,很多时候需要弹框的地方都直接用alert().confirm().prompt()这些自带的提示框,最大的问题是这三个哥们随着浏览器的不同进行变色,简直是前端变色龙,神奇又无奈 所以,这次和我们的帅气设计师合作总结出这三种提示框,我也通过最近的学习把新学到手的封装技术,融入了进去,相对于大神级别的人,看看就行,顺便指点一下就更好了 [目前自己思考的问题]到目前为止,自己工作也有2.5年了,早早过了只知道实现需求的时候了,更多的是培养

css画一个提示框

用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dialog{ display:inline-block; padding:10px; border-radius: 4px; z-index: 2000;

vue+elementui 新增和编辑如何实现公用一个弹框

//html代码: //按钮 <el-button type="primary" size="medium" @click="addEquipment">新增</el-button> <el-button type="text" size="medium" @click="handelEdit(scope.$index, scope.row)">编辑&

如何判断一个弹框是打开还是关闭状态?

1.给弹框设置标记物. <input type="hidden" id="allcomplaintlist_status" value="0"> 将value设置为0: 2:当弹框打开时,将value设置为1: $("#allcomplaintlist_status").val('1'); 3.当弹框关闭时,将value设置为0: $("#allcomplaintlist_status").va

java+selenium+new——操作JavaScript的3个弹框对比总结

引入包:import org.openqa.selenium.Alert; js的alert弹框 Alert alert = driver.switchTo().alert(); //获取并创建alert对象 alert.getText(); //获取弹出框中的文字 alert.accept(); //点击弹出框上面的确定按钮 ======================================================================== js的confirm弹框