在BootStrap中单击按钮时未显示模式
在BootStrap中单击按钮时未显示模式
提问于 2017-06-12 21:43:20
看看下面的代码：
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
<a href="#">Register</a>
</span>
</div>
<div class="myPanelBody">
<form id="loginForm">
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="registerPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Register
</h3>
<span id="flipper2">
<a href="#">Login</a>
</span>
</div>
<div class="myPanelBody">
<form id="registerForm">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your name here" />
</div>
<div class="form-group">
<label for="newAuthCode">New Authentication Code</label>
<input type="password" class="form-control" id="newAuthCode" placeholder="New auth code" />
</div>
<div class="form-group">
<label for="clientSecret">Client Secret</label>
<input type="password" class="form-control" id="clientSecret" placeholder="Client secret" />
</div>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
</div>
</div>因为，您可以在任何一个表单中单击submit按钮时弹出see..the模式。但是，当我单击登录表单中的提交按钮时，没有任何反应。我知道我犯了一些错误，因为几个小时前它还在正常工作，我不知道我做错了什么，现在我的代码完全崩溃了。模式窗口是用来显示加载微调器的。在上面的代码中，您可以看到每个表单中都有一个锚元素，分别具有text Register和Login。我不知道这是否有必要，但我会解释它的作用。我想隐藏登录表单，并在单击注册链接时显示注册表单。注册表单也有一个按钮，以相同的方式隐藏自己，并使登录表单在视觉上。注册表单也有一个提交按钮，当单击该按钮时，将触发模式。
如上所述，当单击Login表单中的submit按钮时，模式不会弹出。但当我切换到注册表并单击那里的提交时，它会触发模式。更有趣的是，当我切换回Login表单并单击那里的submit时，它也会像预期的那样显示模式。简而言之，当URL更改为myfile.php?#时，一切正常，但是当URL为myfile.php或myfile.php?时，如果不切换表单至少一次，我就无法从登录表单的提交按钮启动Modal。
回答 2
Stack Overflow用户
发布于 2017-06-12 22:09:04
下面的代码将在单击按钮时启动模式窗口。
这不是使您的逻辑工作的代码，但这将只是在单击按钮时弹出模式窗口。
使用的库: Bootstrap jQuery2.1.1， 3.3.7
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>Stack Overflow用户
发布于 2017-06-12 22:17:46
留出一些时间提交表单并显示模式
您同时在做相同的事情，首先显示模式，然后提交表单
function myFunction()
{
setTimeout(function(){
$("#loginForm").submit(); // if you want
}, 2000);
return false;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="loginPanel">
<div class="myFormContainer">
<div class="myPanelHeadingContainer">
<h3 class="myPanelTitle">
Login
</h3>
<span id="flipper1">
<a href="#">Register</a>
</span>
</div>
<div class="myPanelBody">
<form id="loginForm" >
<div class="form-group">
<label for="authCode">Authentication Code</label>
<input type="password" class="form-control" id="authCode" placeholder="Auth code" />
</div>
<button onclick="return myFunction();" class="btn btn-default" data-toggle="modal" data-target="#loadingModal">Submit</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
loading
</div>
</div>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44500967
复制相关文章
相似问题
腾讯云开发者
