1
我創建WordPress主題，試圖通過單擊包含a href導航菜單選擇WordPress的主導航A HREF打開模式
我的代碼是靜態的HTML工作中li元素打開模式：
// Get the modal
var modal1 = document.getElementById("myModal-registration");
// Get the button that opens the modal
var btn1 = document.getElementById("sign-up");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
};
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
};.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
z-index: 1000;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: 0 auto;
padding: 20px;
border: 1px solid #888;
width: 60%;
@media screen and (max-width: 420px) {
width: 100%;
}
.container {
font-family: 'Open Sans', sans-serif;
display: block;
font-size: 18px;
line-height: 20px;
// margin: 0 auto;
}
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<nav class="navBar">
<nav class="wrapper">
<ul>
<li class="pure-menu-link"><a href="#sign-in" id="sign-up">SIGN UP</a></li>
</ul>
</nav>
</nav>
<div id="myModal-registration" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<form class="modal-content-animate" action="/action_page.php">
<div class="container">
<!--<label><b>Email</b></label>-->
<input type="text" placeholder="Enter Email" name="email" required>
<br>
<input type="password" placeholder="Enter Password" name="psw" required>
<br>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<br>
<div class="clearfix">
<button type="submit" class="signupbtn">Sign Up</button>
<button type="button" onclick="document.getElementById('myModal-registration').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</form>
</div>
</div>
但在WordPress的菜單是註冊在functions.php：
function register_theme_menus() {
register_nav_menus(array(
'primary-navigation' => __('Primary Navigation'),
));
}
和header.php使用PHP被稱爲：
wp_nav_menu(array(
'container' => 'ul',
'menu_class' => '',
'theme_location' => 'primary-navigation',
'menu' => 'primary-navigation'
));
畢竟，生成的HTML代碼沒有ID爲a href：
<ul id="menu-main-navigation" class="">
<li id="menu-item-20" class="pure-menu-link menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#sign-up">SIGN UP</a></li>
</ul>
與#自定義URL在WordPress的菜單設置選項： 
和嘗試被選爲a href使用JS：
var btn1 = document.querySelectorAll("a[href^='#sign-up']");
但沒有任何拿得出手的成績。我在這裏錯過了一個觀點，在這種情況下只使用JS並不是一個有效的選項？ 如果您有任何其他問題，請告訴我。非常感謝所有可能的幫助，我們將期待。
爲什麼不添加自定義菜單鏈接，把錨存在，而不是鏈接。您將看到顯示爲自定義菜單鏈接的href的錨點。 –
我已更新我的問題@Ihazkode，你會看到自定義菜單鏈接被添加爲'a href' –