我有一个登录弹出窗口,里面有一个表单。问题是表单在提交时无效。为什么是这样?我尝试过移动表单元素,但没有任何工作。我误解了输入的某些部分吗? 操作有意为hi
,因此我会转到完全不同的页面。但没有任何反应......
/***********************\
Modal Module - Title CSS FTW
\***********************/
body {
padding: 0;
margin: 0;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 19px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */

<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='hi' method='post'>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<input type='submit' value='Login' id='login_submit'>
</form>
<span class="close"></div>
</div>
</div>
<!-- nav -->
<div id='nav'>
<span id='nav_logo'> Logo </span>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#' class='model_link2'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href="#Popup" class="button"> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $("a[href=" + this.selector + "]");
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
</body>
&#13;
编辑@Arun P Johny
这就是我的代码现在的样子:
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
这是对的吗?
答案 0 :(得分:1)
您的代码中有2个问题
用于$trigger
的选择器抛出错误 - 您的控制台中有VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup]
$trigger = $('a[href="' + this.selector + '"]')
$model
和close
按钮的点击处理程序也阻止了提交按钮点击事件的默认操作
$modal.on("click", function(e) { //instead of $modal.add($modal.find(".close")).on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
演示:Fiddle