Question

定义：我正在创建一个管理实习生的项目。目前我在员工方面工作;员工可以添加/编辑/删除实习生。这些操作由模式弹出处理。

方法：为了避免不必要的代码，我创建了一个布局模式。

<div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3><span class="glyphicon glyphicon-pencil"></span>Intern</h3>
            </div>

            <div id="myModalContent"></div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-default btn-default pull-right" data-dismiss="modal">&nbsp;Cancel
                </button>

            </div>
        </div>

如您所见，布局有CANCEL按钮。因为每个模态都应该有取消按钮，所以最好的方法就是将其放置到布局中。

<div id="myModalContent"></div>

此myModalContent部分由javascript / ajax代码填充。脚本将部分视图添加到myModalContent。此外，“保存更改”，“删除实习生”等按钮来自部分视图。

问题：但myModalContent位于另一个div，取消按钮位于另一个div。这导致了一个问题：

编辑按钮代码：

<div class="modal-footer">
        <button type="submit" class="btn btn-default btn-default pull-right">
            <span class="glyphicon glyphicon-floppy-disk"></span> Edit Intern
        </button>
    </div>

我希望这些按钮位于同一行。据我所知（从我的研究中）我无法使用css / html访问父div。

任何帮助将不胜感激。感谢

修改

Jquery代码在这里：

$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            keyboard: true
        }, 'show');
        bindForm(this);
    });
    return false;
});



function bindForm(dialog) {
$('form', dialog).submit(function () {
    $('#progress').show();
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                $('#progress').hide();
                location.reload();
            } else {
                $('#progress').hide();
                $('#myModalContent').html(result);
                bindForm();
                location.reload();
            }
        }
    });
    return false;
});

Answer 1

您可以从myModalContent获取编辑按钮，并在使用以下jquery加载部分视图后将其附加到modal-footer

else {
       $('#progress').hide();
       $('#myModalContent').html(result);
       //move button from modal content to footer
       $('div.modal-footer').append($('#myModalContent button.btn.btn-default.pull-right'));
       bindForm();
       location.reload();
   }

如果需要，请在取消按钮前修改按钮，然后使用prepend()代替append()

静态地将父按钮添加到父div

1 个答案: