如何重用一个具有不同id的模态(Bootstrap)

时间:2014-05-25 08:41:46

标签: jquery html twitter-bootstrap

我想问一下如何使这个模式可以重复使用不同的ID,而不需要循环例如:我有10个按钮。粗体文字 HERE 是ID应该在哪里。

<button type="button" id="1" data-toggle="modal" data-target="#1"></button>

依此类推,直到第10个身份证。有没有像jQuery / ajax这样的方法呢?如果有这样的帮助,我们非常感谢!

<div class="modal fade" id="**HERE**" 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>
                <h4 class="modal-title" id="myModalLabel">Add resource</h4>
            </div>
            <form action="InsertResServlet" method="POST">
                <div style="width:250px; margin:0 auto;" class="modal-body">
                    <div class="form-group">
                        <label>Name</label><br/>
                        <div style="alignment-adjust: middle" class="btn-group">
                            <input type="hidden" name="username" value="**HERE**"/>
                            <input type="hidden" name="projid" value="the ID"/>
                            <select name="empname">
                                <!--some data from database here-->
                            </select>
                        <br/><br/><label>Effort</label>
                        <input type="number" name="effort" min="0" max="1" step="0.1" value="0" required="required"/>
                        <br/><br/><label>Date</label>
                        <input type="text" name="date" required="required" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-danger" value="ADD"/>
                </div>
            </form>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:0)

我认为您正在寻找远程模式。

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

它的基本功能是将内容注入.modal-content您可以使用PHP加载内容。