我一直在尝试将此功能添加到我的登录模式中,但我无法让它正常工作。我希望得到一些帮助,因为我无法绕过它。
我想让popover标题中的“x”按钮关闭popover,表单仅在模态关闭时才有效。当模态打开时,我真的希望这个工作。这是我正在使用的代码。
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="loginModalLabel">Login</h3>
</div>
<div class="modal-body-login">
<form>
<div class="form-group">
<label for="usernameInput">Username</label>
<input type="username" class="form-control" id="usernameInput" placeholder="Username">
</div>
<div class="form-group">
<label for="passwordInput">Password</label>
<input type="password" class="form-control" id="passwordInput" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
<label>
<p class="forgot-password"><a href="#" id="passwordReset" data-html="true" data-container="body" data-toggle="popover" title="Password Reset <button type='button' class='close' id='close-popover' data-toggle='popover' aria-label='Close'><span aria-hidden='true'>×</span></button>" data-placement="right" data-content="
<p>Please Enter the Email Adress linked to your account, well send you a password reset right away!</p>
<form>
<div class='form-group'>
<input type='newEmail' class='form-control' placeholder='Email Adress'>
</div>
<button type='submit' class='btn btn-success btn-block'>Reset!</button>
</form>
">Forgot Password?</a></p>
</label>
</div>
<button type="submit" class="btn btn-success btn-block">Login</button>
</form>
</div>
<div class="modal-footer">
<h4>- OR -</h4>
<a href="#collapseSignUp" data-toggle="collapse" aria-expanded="false" aria-controls="collapseSignUp"><h1>Sign Up</h1></a>
<div class="collapse" id="collapseSignUp">
<div class="well">
<form>
<div class="form-group">
<input type="newUser" class="form-control" placeholder="New Username">
</div>
<div class="form-group">
<input type="newName" class="form-control" placeholder="First & Last Name">
</div>
<div class="form-group">
<input type="newEmail" class="form-control" placeholder="Email Adress">
</div>
<div class="form-group">
<input type="newPassword" class="form-control" placeholder="New Password">
</div>
<div class="checkbox sub-check">
<label>
<input type="checkbox"> Sign Up for our newsletter? <p class="sub">No spam + Tonnes of free stuff.</p>
</label>
</div>
<button type="submit" class="btn btn-info btn-block">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
如果有正当理由不能正常工作,我很想知道。非常感谢你!
答案 0 :(得分:1)
你的问题不明确,根据我的理解,你可以用关闭按钮弹出html内容,这样。
$(document).ready(function(){
$('#loginModal').modal('show');
$("#passwordReset").popover({
container: '#loginModal',
html: true,
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"><button class="closePopover"><span aria-hidden=""true">×</span></button></h3><div class="popover-content"></div></div>',
title: '<span class="text-info"><strong>Password Reset</strong></span>'+
'<button type="button" id="close" class="close" onclick="$("#passwordReset").popover("hide");">×</button>',
content: function() {
return $('#popover-content').html();
}
});
});
&#13;
.popover-title .close{
margin-top: -3px;
position: absolute;
right: 5px;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="loginModalLabel">Login</h3>
</div>
<div class="modal-body-login">
<form>
<div class="form-group">
<label for="usernameInput">Username</label>
<input type="username" class="form-control" id="usernameInput" placeholder="Username">
</div>
<div class="form-group">
<label for="passwordInput">Password</label>
<input type="password" class="form-control" id="passwordInput" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
<label>
<p class="forgot-password">
<a href="#" id="passwordReset">Forgot Password?</a></p>
</label>
</div>
<button type="submit" class="btn btn-success btn-block">Login</button>
</form>
</div>
<div class="modal-footer">
<h4>- OR -</h4>
<a href="#collapseSignUp" data-toggle="collapse" aria-expanded="false" aria-controls="collapseSignUp"><h1>Sign Up</h1></a>
<div class="collapse" id="collapseSignUp">
<div class="well">
<form>
<div class="form-group">
<input type="newUser" class="form-control" placeholder="New Username">
</div>
<div class="form-group">
<input type="newName" class="form-control" placeholder="First & Last Name">
</div>
<div class="form-group">
<input type="newEmail" class="form-control" placeholder="Email Adress">
</div>
<div class="form-group">
<input type="newPassword" class="form-control" placeholder="New Password">
</div>
<div class="checkbox sub-check">
<label>
<input type="checkbox"> Sign Up for our newsletter? <p class="sub">No spam + Tonnes of free stuff.</p>
</label>
</div>
<button type="submit" class="btn btn-info btn-block">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="popover-content" class="hide">
<p>Please Enter the Email Adress linked to your account, well send you a password reset right away!</p>
<form>
<div class='form-group'>
<input type='email' name="newEmail" class='form-control' placeholder='Email Adress'>
</div>
<button type='submit' class='btn btn-success btn-block'>Reset!</button>
</form>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
&#13;
如果您有任何问题,请发表评论。