Question

所以，我有代码：

    function winModal(am)
{
    document.write('<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">');
    document.write('<div class="modal-dialog modal-dialog1 modal-lg">');
    document.write('<div class="modal-content modal-content1">');
    document.write('<div class="modal-body modal-body1">');
    document.write('<H2>Congratulations!</H2>');
    document.write('...');
    document.write('...');
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');
    document.write('</div>');

    $('#winModal' + am).modal('show');
}

它完美地工作（创建一个自定义模式并显示它），因为我在文件的末尾使用它，比如winModal（100）。当我想在按钮（onclick）中使用它时，它会删除整个站点的内容并用模态替换它。我知道为什么会这样。（document.write会覆盖网站的内容，如果它已加载）。我想知道如何让它正常工作。我尝试了innerHTML：

function winModal(am)
{
    document.getElementById('kkk').innerHTML = '<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">';
    document.getElementById('kkk').innerHTML = '<div class="modal-dialog modal-dialog1 modal-lg">';
    document.getElementById('kkk').innerHTML = '<div class="modal-content modal-content1">';
    document.getElementById('kkk').innerHTML = '<div class="modal-body modal-body1">';
    document.getElementById('kkk').innerHTML = '<H2>Congratulations!</H2>';
    document.getElementById('kkk').innerHTML = '<h4>You have won <span style="font-weight:bold;">' + am + '</span> credits!</h4>';
    document.getElementById('kkk').innerHTML = '<h4>Go to <span style="font-weight:bold;">my winnings</span> to withdraw this or play more!</h4>';
    document.getElementById('kkk').innerHTML = '</div>';
    document.getElementById('kkk').innerHTML = '</div>';
    document.getElementById('kkk').innerHTML = '</div>';
    document.getElementById('kkk').innerHTML = '</div>';

    $('#winModal' + am).modal('show');
}

但是，它没有显示模态。

Answer 1

您每次都会string分配document.getElementById('kkk').innerHTML。

function winModal(am) {
  var htmlStr = "";
  htmlStr += '<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">';
  htmlStr += '<div class="modal-dialog modal-dialog1 modal-lg">';
  htmlStr += '<div class="modal-content modal-content1">';
  htmlStr += '<div class="modal-body modal-body1">';
  htmlStr += '<H2>Congratulations!</H2>';
  htmlStr += '<h4>You have won <span style="font-weight:bold;">' + am + '</span> credits!</h4>';
  htmlStr += '<h4>Go to <span style="font-weight:bold;">my winnings</span> to withdraw this or play more!</h4>';
  htmlStr += '</div>';
  htmlStr += '</div>';
  htmlStr += '</div>';
  htmlStr += '</div>';
  document.getElementById('kkk').innerHTML = htmlStr;
  $('#winModal' + am).modal('show');
}

第一次工作的原因是document.write() {h}文件append。

在第二个document.getElementById('kkk').innerHTML将assign字符串。

Answer 2

每次使用document.getElementById('kkk').innerHTML尝试创建模板并分配给kkk元素时，您将使用新字符串覆盖现有字符串。

function winModal(am){

    var HTML = '<div class="modal modal1 fade winmodal" id="winModal' + am + '" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">'+
                    '<div class="modal-dialog modal-dialog1 modal-lg">'+
                        '<div class="modal-content modal-content1">';
                            '<div class="modal-body modal-body1">'+
                                '<H2>Congratulations!</H2>';
                                '<h4>You have won <span style="font-weight:bold;">' + am + '</span> credits!</h4>'+
                                '<h4>Go to <span style="font-weight:bold;">my winnings</span> to withdraw this or play more!</h4>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>';

    document.getElementById('kkk').innerHTML = HTML;

    $('#winModal' + am).modal('show');
}

在onclick中创建和显示模态

2 个答案: