Question

我正在寻找关于这个问题的答案，但我找不到我需要它的正确答案。我正在使用带引导程序的模态对话框，我希望在click事件上更改模态的内容。

这是我的模态对话框代码

<div class="modal fade" id="myModal{{ $user->id }}" tabindex="-1" class="closemodal" 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"></button>
                <h4 class="modal-title" id="myModalLabel">More About {{ $user->name }}</h4>
            </div>
            <div class="modal-body">
                <center>
                    <img src="http://bootdey.com/img/Content/user_1.jpg" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
                    <h3 class="media-heading">{{ $user->name }}<small>, USA</small></h3>
                    <span><strong>Skills: </strong></span>
                    <span class="label label-warning">HTML5/CSS</span>
                    <span class="label label-info">Adobe CS 5.5</span>
                    <span class="label label-info">Microsoft Office</span>
                    <span class="label label-success">Windows XP, Vista, 7</span>
                </center>
                <hr>
                    <center>
                        <p class="text-left"><strong>Email: </strong>
                            {{ $user->email }}</p>
                        <br>
                    </center>
            </div>
            <div class="modal-footer">
                <center>
                    <button type="button" class="btn btn-default" data-dismiss="modal">I've heard enough about {{ $user->name }}</button>
                    <button type="button" class="btn btn-danger" id="editUserAdmin">Edit informations</button>
                </center>
            </div>
        </div>
    </div>
</div>

点击按钮Edit informations后，我想更改所有内容，我想插入一些输入字段。

Answer 1

您可以创建功能：

function show_my_modal() {
    var modal = $('#my_modal_id');

    // change modal content
    modal.find('.i_want_to_change_value_of_element').val('element value');

    // show my modal:
    modal.modal('show');
}

您可以使用按钮onClick='show_my_modal();'

Answer 2

你可以：

制作2个div：<div id="default"></div><div id="on_click" style="display:none"></div>并隐藏default并在添加到on_click按钮的点击事件中显示Edit informations;并像这样在它们之间切换。
制作一个带有初始内容的容器div然后单击执行以下操作：var html = "<p>New html</p>";$(".container_div").empty().append(html); - 但是这样旧的内容将从对话框中删除并保留新内容直到页面刷新

如何在点击（Bootstrap）上更改模态内容

2 个答案: