コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery div cssに基づいてポップアップログインウィンドウを実装します（コードは非常に単純です）_jquery

Jquery div cssに基づいてポップアップログインウィンドウを実装します（コードは非常に単純です）_jquery

WBOY
リリース： 2016-05-16 15:34:51
オリジナル
2299 人が閲覧しました

具体的なコードの詳細は次のとおりです:

基本的な考え方は、まず非表示 (表示: なし) にしてから表示し、半透明のマスク レイヤーを通過させます

z-index:9998;
z-index:9999;

値が大きいほど手前になります

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery点击弹出登陆窗口</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" media="all">
<script src="js/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
  $('.theme-login').click(function(){
    $('.theme-popover-mask').fadeIn(100);
    $('.theme-popover').slideDown(200);
  })
  $('.theme-poptit .close').click(function(){
    $('.theme-popover-mask').fadeOut(100);
    $('.theme-popover').slideUp(200);
  })
})
</script>
</head>
<body>
<div class="theme-buy">
<a class="btn btn-primary btn-large theme-login" href="javascript：;">点击查看效果</a>
</div>
<div class="theme-popover">
   <div class="theme-poptit">
     <a href="javascript：;" title="关闭" class="close">×</a>
     <h3>登录 是一种态度</h3>
   </div>
   <div class="theme-popbod dform">
      <form class="theme-signin" name="loginform" action="" method="post">
        <ol>
           <li><h4>你必须先登录！</h4></li>
           <li><strong>用户名：</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
           <li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
           <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
        </ol>
      </form>
   </div>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>
ログイン後にコピー

CSS ファイル jiaobenzhijia.css

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, code, del, dfn, em, img, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, button, input, table, caption, tbody, tfoot, thead, tr, th, td, menu {
  margin:0;
  padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display:block
}
audio, canvas, video {
  display:inline-block;
*display:inline;
*zoom:1
}
audio:not([controls]) {
display:none
}
table {
  border-collapse:collapse;
  border-spacing:0;
  empty-cells:show
}
ol, ul, menu {
  list-style:none
}
img {
  border:0
}
a:focus {
  outline:none
}
em, i {
  font-style: normal;
}
button, input, select, textarea {
  font-size:100%;
  margin:0;
  vertical-align:-3px;
  outline:none;
}
button, input {
  border:1px solid;
  outline:none;
  line-height:normal;
*overflow:visible
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor:pointer;
  -webkit-appearance:button
}
input[type="search"] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
textarea {
  overflow:auto;
  vertical-align:top
}
::selection {
background:#72d0eb;
color:#fff;
text-shadow:none
}
::-moz-selection {
background:#72d0eb;
color:#fff;
text-shadow:none
}
*[hidden] {
  display:none
}
a {
  color:#0088DB;
  text-decoration:none;
  cursor:pointer
}
a:hover {
  color:#2A5E8E
}
.clearfix:after, .central:after, .widget ul:after, .paging:after, .pagenav:after, .base-tit:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden
}
.clearfix, .central, .widget ul, .paging, .pagenav, .base-tit {
*+height:1%;
}
body, button, input, select, textarea, code {
  font-size:12px;
  font-family:microsoft yahei;
  color: #444;
}
/*window*/
/* input */
.ipt {
  border: solid 1px #d2d2d2;
  border-left-color: #ccc;
  border-top-color: #ccc;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 #f8f8f8;
  background-color: #fff;
  padding: 4px 6px;
  height: 21px;
  line-height: 21px;
  color: #555;
  width: 180px;
  vertical-align: baseline;
}
.ipt-mini {
  width: 140px;
  padding: 1px 3px;
}
.ipt:focus {
  border-color: #95C8F1;
  box-shadow: 0 0 4px #95C8F1;
}
/* btn */
.btn {
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  font-weight: bold;
  height: 27px;
  line-height: 27px;
  min-width: 52px;
  padding: 0 12px;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #666;
  background-color: #f5f5f5;
  background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
  background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
  background: linear-gradient(top, #F5F5F5, #F1F1F1);
}
input.btn {
  height: 29px;
}
.btn:hover {
  border-color:#c6c6c6;
  color:#333;
  background-color:#f8f8f8;
  background:-webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
  background:-moz-linear-gradient(top, #f8f8f8, #f1f1f1);
  background:linear-gradient(top, #f8f8f8, #f1f1f1);
  box-shadow:#ddd 0 1px 1px 0;
}
.btn:active, .btn.btn-active {
  box-shadow:#ddd 0 1px 2px 0 inset;
  border-color:#c6c6c6;
}
.btn:focus {
  border-color:#4d90fe;
  outline:none
}
.btn-primary {
  border-color: #3079ED;
  color: #F3F7FC;
  background-color: #4D90FE;
  background: -webkit-linear-gradient(top, #4D90FE, #4787ED);
  background: -moz-linear-gradient(top, #4D90FE, #4787ED);
  background: linear-gradient(top, #4D90FE, #4787ED);
}
.btn-primary:hover {
  border-color:#2F5BB7;
  color:#fff;
  background-color: #4D90FE;
  background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
  background: -moz-linear-gradient(top, #4D90FE, #357AE8);
  background: linear-gradient(top, #4D90FE, #357AE8);
}
.btn-primary:active, .btn-primary.btn-active {
  box-shadow:#2176D3 0 1px 2px 0 inset;
  border-color: #3079ED;
}
.btn-primary:focus {
  border-color:#4d90fe;
  outline:none
}
.theme-buy {
  margin-top:10%;
  text-align: center;
}
.theme-gobuy, .theme-signin {
  font-size: 15px;
}
.theme-price {
  position: relative;
  bottom: -6px;
  font-family: microsoft yahei, Arial, Helvetica, sans-serif;
  margin-right: 20px;
  font-weight: bold;
  color: #f60;
  line-height: 32px;
  font-size: 24px;
  display: inline-block;
}
.theme-price dfn {
  font-style: normal;
  font-size: 18px;
  margin-right: 2px;
}
.theme-desc {
  padding: 30px;
}
.theme-version {
  padding: 30px;
}
.theme-popover-mask {
  z-index: 9998;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity:0.4;
  filter:alpha(opacity=40);
  display:none
}
.theme-popover {
  z-index:9999;
  position:fixed;
  top:50%;
  left:50%;
  width:660px;
  height:360px;
  margin:-180px 0 0 -330px;
  border-radius:5px;
  border:solid 2px #666;
  background-color:#fff;
  display:none;
  box-shadow: 0 0 10px #666;
}
.theme-poptit {
  border-bottom:1px solid #ddd;
  padding:12px;
  position: relative;
}
.theme-popbod {
  padding:60px 15px;
  color:#444;
  height: 148px;
}
.theme-popbom {
  padding:15px;
  background-color:#f6f6f6;
  border-top:1px solid #ddd;
  border-radius:0 0 5px 5px;
  color:#666
}
.theme-popbom a {
  margin-left:8px
}
.theme-poptit .close {
  float:right;
  color:#999;
  padding:5px;
  margin:-2px -5px -5px;
  font:bold 14px/14px simsun;
  text-shadow:0 1px 0 #ddd
}
.theme-poptit .close:hover {
  color:#444;
}
.btn.theme-reg {
  position: absolute;
  top: 8px;
  left: 43%;
  display: none
}
.inp-gray, .feed-mail-inp {
  border:1px solid #ccc;
  background-color:#fdfdfd;
  width:220px;
  height:16px;
  padding:4px;
  color:#444;
  margin-right:6px
}
.dform {
  padding:80px 60px 40px;
  text-align: center;
}
.dform .ipt_error {
  background-color:#FFFFCC;
  border-color:#FFCC66
}
.dform-tip {
  display:none;
  background-color:#080;
  color:#fff;
  line-height:42px;
  margin-top:10px;
  font-size: 14px;
}
.dform-tip-errer {
  background-color: #CF301A;
}
.dform-tip a {
  display: inline-block;
  padding: 0 20px;
  margin-left:10px;
  background-color: #FFE924;
  color: #CF301A;
}
.dform-login {
  padding:0;
  height: 270px;
  overflow: hidden;
}
.dform-login iframe {
  height: 470px;
  margin-top: -180px;
}
.theme-signin {
  margin: -50px -20px -50px 90px;
  text-align:left;
  font-size: 14px;
}
.theme-signin h4 {
  color:#999;
  font-weight:100;
  margin-bottom: 20px;
  font-size: 12px;
}
.theme-signin li {
  padding-left: 80px;
  margin-bottom: 15px;
}
.theme-signin li strong {
  float: left;
  margin-left: -80px;
  width: 80px;
  text-align: right;
  line-height: 32px;
}
.theme-signin .btn {
  margin-bottom: 10px;
}
.theme-signin p {
  font-size: 12px;
  color: #999;
}
.theme-desc, .theme-version {
  padding-top: 0
}
/*
ログイン後にコピー

上記のコードは、Jquery div CSS に基づいてポップアップ ログイン ウィンドウを実装するためにエディターが共有したものです。このコードは誰にとっても役立つことを願っています。

関連ラベル：
jquery_div_css jquery登录窗口
ソース：php.cn
前の記事：ダブルクリック画面スクロール効果を実装するJSコード_javascriptスキル 次の記事：プライベート メンバーの文法機能と JavaScript_javascript スキルに基づくプライベート メンバーの実装方法を実装する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2194
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2342
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1964
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1852
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1911
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート