php - 无法使用 div id 触发自定义材料设计模型到 wordpress 菜单
问题描述
我无法使用div id. 我想调用login modelWordPress 的自定义登录菜单并将模型注册到注册链接。下面还给出了模型的源代码，请检查并帮助我解决这个问题。谢谢
这是我要调用的模型的链接。
这是我要调用的链接
<?php /* Template Name: mdb-register */ ?>
<html lang="en">
<head>
<title>WatchAwear Login/Registration Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
<style>
.nav.nav-tabs.md-tabs.tabs-2.light-blue.darken-3 {
padding: 10px;
background: #3b3b3b !important;
}
.nav-link {
color: #fff !important;
border:none !important;
}
.nav-link.active {
color: #020202 !important;
}
.nav-link.active:hover {
background: #fff !important;
border-color: #fff !important;
}
.nav-link:hover {
background: #0006 !important;
border-color: #232323 !important;
}
.btn.btn-info {
background-color: #020202 !important;
width: 100%;
}
.btn-outline-info{
border-color: #020202 !important;
background-color: transparent !important;
color: #020202 !important;
}
.btn-outline-info:hover {
border-color: #020202 !important;
background-color: transparent !important;
color: #020202 !important;
}
#modalLRForm {
padding-left: 0 !important;
background: #fff6;
}
#modalLRForm1 {
padding-left: 0 !important;
background: #fff6;
}
/*=========Mobile Styles STARTS============== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-device-width: 480px) {
.modal-dialog.cascading-modal .modal-body, .modal-dialog.cascading-modal .modal-footer {
padding-left: 1rem !important;
padding-right: 1rem !important;
color: #616161;
font-size: 13px !important;
}
}
/*=========Mobile Styles ENDS============== */
</style>
</head>
<body style="background:#020202;">
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
Register</a>
</li>
</ul>
<div class="modal-body">
<div class="md-form form-sm mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="modalLRInput9" class="form-control form-control-sm validate data-val-required" placeholder="First Name">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="modalLRInput10" class="form-control form-control-sm validate data-val-required" placeholder="Last Name">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="modalLRInput11" class="form-control form-control-sm validate data-val-required" placeholder="Username">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="modalLRInput12" class="form-control form-control-sm validate data-val-required" placeholder="Email">
<label data-error="wrong" data-success="right" for="modalLRInput12"></label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput13" class="form-control form-control-sm validate data-val-required" placeholder="Password">
<label data-error="wrong" data-success="right" for="modalLRInput13"></label>
</div>
<div class="md-form form-sm mb-4">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput14" class="form-control form-control-sm validate data-val-required" placeholder="Verify password">
<label data-error="wrong" data-success="right" for="modalLRInput14" ></label>
</div>
<!-- Material unchecked -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialUnchecked">
<label class="form-check-label" for="materialUnchecked">Terms and Conditions</label>
</div>
<div class="text-center form-sm mt-2">
<button type="submit" class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-left">
<p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Tab panels -->
</div>
<!--/.Content-->
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-primary my-3" data-toggle="modal" data-target="#modalLRForm">Register</a>
</div>
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist" >
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
Login</a>
</li>
</ul>
<!-- Form Start -->
<div class="modal-body mb-1">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control form-control-sm validate" placeholder="Username">
<label data-error="wrong" data-success="right" for="form3"></label>
</div>
<div class="md-form form-sm mb-4">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput15" class="form-control form-control-sm validate" placeholder="Password">
<label data-error="wrong" data-success="right" for="modalLRInput11"></label>
</div>
<div class="text-center mt-2">
<button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p><a href="#" class="blue-text">Forgot Password?</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login / Register Form-->
<div class="text-center">
<a href="" class="btn btn-danger my-3" data-toggle="modal" data-target="#modalLRForm1">LogIn</a>
</div>
</body>
</html>解决方案
推荐阅读
- javascript - 将文件对象转换为对象数组
- laravel - laravel 7 php artisan route：缓存不起作用
- python - 将编码字符串发送到服务器时出现 Python 错误
- python - 将视频数据从一个 python 脚本传递到另一个
- tableau-api - 有没有办法在 Tableau Desktop 或 Tableau Prep 中创建日历查找表
- django - Django_tables2 类定义中的条件语句
- scala - 阐明 Scala 中的跨版本行为
- reactjs - 我在使用 react-native-geolocation-service 时得到 [TypeError: null is not an object (evalating 'RNFusedLocation.getCurrentPosition')]
- c# - 如何从 c# 中的“System.Collections.Generic.List`1[Microsoft.Online.Administration.UserLicense]”对象解析或提取数据
- windows - Perl 如何查看 Windows 快捷方式指向的位置？