js에서 팝업 양식 제출을 구현하는 방법은 무엇입니까? (사진 + 동영상)-HTML 지식-php.cn

집

일일 프로그램

HTML 지식

js에서 팝업 양식 제출을 구현하는 방법은 무엇입니까? (사진 + 동영상)

藏色散人

Oct 19, 2018 am 09:57 AM

이 글에서는 팝업 제출 양식을 구현하기 위한 js의 구체적인 방법을 주로 소개합니다.

js 팝업 양식 제출 구현은 프론트엔드 인터뷰에서 자주 묻는 질문 중 하나이기도 합니다. 프론트엔드 초보자에게는 다소 어려울 수 있습니다.

아래에서는 간단한 코드 예시를 통해 js 팝업 제출 양식의 특수효과를 구현하는 방법을 자세히 소개하겠습니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
    <title>js实现弹出提交表单 </title>
    <meta charset="utf-8">
    <style type="text/css">
        #all_light { /*整个弹窗的页面*/
            opacity: 0.8; /*透明度*/
            width: 100%; /*宽度*/
            height: 2300px; /*高度，不能百分百*/
            background: #000; /*背景色*/
            position: absolute;
            top: 0;
            left: 0; /*定位*/
            display: none; /*隐藏*/
            z-index: 2; /*覆盖*/
        }
        #contes { /* 弹框的页面*/
            width: 500px; /*宽度*/
            height: 500px; /*高度*/
            background: #fff; /*背景色*/
            display: none; /*隐藏*/
            z-index: 2; /*覆盖*/
            position: absolute;
            top: 100px;
            left: 400px; /* 定位*/
        }
        input{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<!-- 点击按钮 -->
<a href="javascript:void(0)" onclick="add()">
    添加
</a>
<!--  弹框的div -->
<div id="contes" >
    <div style="width:500px;height:40px;">
        添加用户
        <hr>
        <form style=" margin-left: 100px;">
            用户名：<input type="text" value="" name="" ><br>
            密   码：<input type="password" value="" name=""><br>
            <input type="submit" value="提交">
        </form>
    </div>
</div>
<div id="all_light">
</div>
</body>
<script>
    function add() {
        document.getElementById(&#39;all_light&#39;).style.display = &#39;block&#39;;
        document.getElementById(&#39;contes&#39;).style.display = &#39;block&#39;;
    }
</script>
</html>

로그인 후 복사

브라우저를 통해 액세스하면 최종 효과는 아래와 같습니다.

js에서 팝업 양식 제출을 구현하는 방법은 무엇입니까? (사진 + 동영상)