Question

我使用twitter bootstrap的模态为登录设置弹出屏幕。

以下代码显示单击LOGIN时的弹出窗体。

<section id="modal-login-form">
        <div class="modal fade" id="m-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <p><h4 class="modal-title" id="myModalLabel">Register</h4></p>
                        <button id="login" type="button" class="btn btn-login">Login</button>
                        <button id="register" type="button" class="btn btn-register">Register</button>
                    </div>
                    <div class="modal-body">
                        <p>Username<br>
                        <input class="user" type="text">
                        </p>
                        <p>Password<br>
                        <input class="pass" type="password">
                        </p>
                        <p>Package<br>
                        <input class="package" type="text">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-signup">Sign up</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

以上代码生成标题“Register”。两个按钮登录和注册如下。我正在努力使两个按钮动态。我在这里想的是当点击登录时，模态将保留在那里，但是主体将动态地改变为登录表单。单击寄存器时，正文将动态更改为注册表单。

我相信有javascript涉及到这个，但我想不出任何方法来解决这个问题。请赐教。非常感谢！

Answer 1

您应该使用jquery load() 方法。

保留用于登录的HTML代码并在单独的文件中注册，让我假设它是login.html和register.html。

为模态正文指定一个ID：<div class="modal-body" id="modal">

用于在模态div中加载登录html的JS代码：

function load_login(){
  $( "#modal" ).load( "login.html" );
}

并在按钮上添加onclick事件以加载函数：

<button id="login" onclick="load_login()" type="button" class="btn btn-login">Login</button>

您可以为注册做同样的事。

如何使用JS来更改bootstrap模式中的内容

1 个答案: