Question

我有一个模态，可以动态获取其内容。内容进入两个部门modal-body和modal-footer。但是问题是只有modal-body是动态更改的，而modal-footer保持不变。

这是html代码的片段（包括引导程序类）：

    <a href='#' data-toggle='modal' data-target='#removeCandidateModal' onclick="removeCandidate()">Remove</a>
<div class="modal fade" id="removeCandidateModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remove Candidate</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="remove-candidates-modal-body">

                </div>
                <div class="modal-footer" id="remove-candidates-modal-footer">

                </div>
            </div>
        </div>
    </div>

javascript部分：

function removeCandidate() {
 let id="45678";
 let name="Bob";
 let election_type="BHVC";
        document.getElementById('remove-candidates-modal-body').innerHTML = '<p>Are you sure you want to remove the following candidate<br> Candidate Name:' + name +
            '<br>Candidate ID:' + id +
            '<br>Elections:' + election_type + '</p>';
        document.getElementById('remove-candidates-modal-footer').innerHTML = '<div class="modal-footer">' +
            '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
            '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>\n' +
            '            </div>';
    }

当前输出为（不显示页脚元素）：

Answer 1

Working fiddle 。

您是如此接近，如果您只是删除多余的div，您的代码应该可以正常工作：

<div class="modal-footer">

因此添加到页脚的html应该是：

document.getElementById('remove-candidates-modal-footer').innerHTML = '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>' +
      '<button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>';

function removeCandidate() {
  let id = "45678";
  let name = "Bob";
  let election_type = "BHVC";

  document.getElementById('remove-candidates-modal-body').innerHTML = '<p>Are you sure you want to remove the following candidate<br> Candidate Name:' + name +
    '<br>Candidate ID:' +
    '<br>Elections:' + election_type + '</p>';
  document.getElementById('remove-candidates-modal-footer').innerHTML = '' +
    '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
    '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href='#' data-toggle='modal' data-target='#removeCandidateModal' onclick="removeCandidate()">Remove</a>
<div class="modal fade" id="removeCandidateModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Remove Candidate</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="remove-candidates-modal-body"></div>
      <div class="modal-footer" id="remove-candidates-modal-footer"></div>
    </div>
  </div>
</div>

Answer 2

如果您使用的是jQuery，则下面的方法应该有效

$(function(){

var id="45678";
var name="Bob";
var election_type="BHVC";

        var modalBody = '<p>Are you sure you want to remove the following candidate<br> Candidate Name:' + name +
            '<br>Candidate ID:' + id +
            '<br>Elections:' + election_type + '</p>';
            
        var modalFooter = '<div class="modal-footer">' +
            '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
            '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>\n' +
            '            </div>';
    

$(".modal-body").html("").html(modalBody);
$(".modal-footer").html("").html(modalFooter);
  $('#removeCandidateModal').modal('toggle');
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <a href='#' data-toggle='modal' data-target='#removeCandidateModal' onclick="removeCandidate()">Remove</a>
<div class="modal fade" id="removeCandidateModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Remove Candidate</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="remove-candidates-modal-body">

                </div>
                <div class="modal-footer" id="remove-candidates-modal-footer">

                </div>
            </div>
        </div>
    </div>

Answer 3

我认为它不起作用，因为您正在尝试向现有的模式页脚类中添加另一个模式页脚类

尝试用以下代码替换

document.getElementById('remove-candidates-modal-footer').innerHTML = '<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>\n' +
        '                <button type="button" class="btn btn-primary" onclick=removeCandidateYes("' + id + '")>Yes</button>\n';

使用javascript更新模态主体和模态页脚？

3 个答案: