<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Popup form</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- font-awesome -->
<link rel="stylesheet" href="assets/css/font-awesome.css">
<!-- style -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--==================================
= MAIN SECTION =
===================================-->
<div class="temp-popup-form-wrapper">
<!--========================================
= navigation section =
=========================================-->
<nav class="navbar navbar-inverse temp-custom-navigation">
<div class="container-fluid">
<div class="navbar-header temp-custom-logo-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">弹出式表单</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right temp-custom-list-items">
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#RegistrationModal">注册表单</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#LogInModal">登录表单</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#ContactModal">联系表单</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#PaymentModal">支付表单</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#ReviewModal">预览表单</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#SubscribeModal">订阅表单</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#ForgotModal">忘记密码</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#ResetModal">重置</a></li>
</ul>
</div>
</div>
</nav>
<!--==== End of navigation section ====-->
<!--==== End of SETTING SECTION ====-->
</div>
<!--==== End of MAIN SECTION ====-->
<!--======================================
= registration form modal =
=======================================-->
<!-- Modal -->
<div class="modal fade" id="RegistrationModal" role="dialog">
<div class="temp-custom-modal-wrap">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content temp-custom-modal-content">
<button type="button" class="close temp-custom-close-button" data-dismiss="modal">×</button>
<div class="modal-body temp-custom-modal-body">
<div class="temp-login-form-wrapper">
<div class="row custom-row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 temp-form-column-wrap-image">
<div class="temp-reg-column-wrap-image">
<div class="temp-form-inner-wrapper">
<h2>注册</h2>
<p>如果用户没有帐户,则通过填写给定的表单创建帐户。</p>
<p class="temp-heading-for-icon temp-reg-para">第三方登录</p>
<div class="temp-anchor-wrap temp-reg-anchor-wrap">
<a href="#" class=" temp-anchor text-left">
<span class="temp-social-icon-wrap">
<i class="fa fa-facebook" aria-hidden="true"></i>
</span>
<span>facebook登录</span>
</a>
<a href="#" class="temp-anchor temp-icon-color text-left">
<span class="temp-social-icon-wrap">
<i class="fa fa-google" aria-hidden="true"></i>
</span>
<span>google登录</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="temp-form-column-wrap">
<h2>注册</h2>
<form>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<span class="temp-span-wrap temp-span-input-label-wrap">
<input class="temp_input_field" type="text" >
<label class="temp_input_label">
<span class="temp_input_label-content">名称</span>
</label>
</span>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<span class="temp-span-wrap temp-span-input-label-wrap">
<input class="temp_input_field" type="text" >
<label class="temp_input_label">
<span class="temp_input_label-content">邮箱</span>
</label>
</span>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<div class="form-group">
<span class="temp-span-wrap temp-span-input-label-wrap">
<input class="temp_input_field" type="password" >
<label class="temp_input_label">
<span class="temp_input_label-content">密码</span>
</label>
</span>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
<div class="form-group">
<span class="temp-span-wrap temp-span-input-label-wrap">
<input class="temp_input_field" type="password" >
<label class="temp_input_label">
<span class="temp_input_label-content">确认密码</span>
</label>
</span>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<span class="temp-span-wrap temp-span-input-label-wrap">
<input class="temp_input_field" type="text" >
<label class="temp_input_label">
<span class="temp_input_label-content">手机号码</span>
</label>
</span>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label class="radio-inline temp-custom-radio-button">
- 1
- 2
- 3
前往页