如何使用JS更改引导程序模式中的内容

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>

上面的代码产生一个标题“寄存器”。 下面有两个按钮，登录和注册。 我试图使两个按钮动态化 。 我在这里的想法是， 单击“登录”后，模态将保留在那里，但主体将动态更改为登录表单。 单击寄存器后，主体将动态更改为寄存器形式。

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

Answer 1

您应该使用jquery load（）方法。

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

• 为模态主体分配一个ID： <div class="modal-body" id="modal">

• JS代码以在模式div中加载登录html：

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

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

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

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