ホームページ >毎日のプログラミング >HTMLの知識 >ポップアップフォームの送信をjsで実装するにはどうすればよいですか? (写真 + ビデオ)
ポップアップフォームの送信をjsで実装するにはどうすればよいですか? (写真 + ビデオ)
- 藏色散人オリジナル
- 2018-10-19 09:57:0925542ブラウズ
この記事では、jsを使ってポップアップ投稿フォームを実装する具体的な方法を中心に紹介します。
js ポップアップ フォーム送信の実装 は、フロントエンドの面接でもよくある質問の 1 つです。フロントエンドの初心者にとっては少し難しいかもしれません。
以下では、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('all_light').style.display = 'block';
document.getElementById('contes').style.display = 'block';
}
</script>
</html>ブラウザ経由でアクセスすると、最終的な効果は次のようになります。
js を使用してポップアップ送信フォームを実装する方法の紹介です。これは実際には非常に簡単です。必要とする友人に役立つことを願っています。 フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイトの
JavaScript ビデオ チュートリアル、Bootstrap ビデオ チュートリアル、およびその他の関連するフロントエンドを参照してください。チュートリアルを終了します。皆さんも参照して学習してください。
以上がポップアップフォームの送信をjsで実装するにはどうすればよいですか? (写真 + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。