javascript - Bootstrap - 在模式内的弹出窗口内形成

Question

我一直在尝试将此功能添加到我的登录模式中，但我无法让它正常工作。我希望得到一些帮助，因为我无法理解它。

我想让弹出窗口标题中的“x”按钮关闭弹出窗口，该表单仅在模式关闭时才起作用。我真的希望它在模式打开时起作用。这是我正在使用的代码。

<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">&times;</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'>&times;</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>

如果有什么原因导致此功能无法正常工作，我很想知道。非常感谢!

Answer 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">&times;</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="$(&quot;#passwordReset&quot;).popover(&quot;hide&quot;);">&times;</button>',
	content: function() {
          return $('#popover-content').html();
        }
});
});

.popover-title .close{
	margin-top: -3px;
	position: absolute;
	right: 5px;
}

<!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">&times;</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>

如有任何问题请评论。