如何更改引导模式2

我有机会改变JS文件，该文件是在同一个域中的I帧src，却iframe的内容本身内没有送达之内的iframe的HTML。我认为我必须等到iframe加载后才能更改html，但是我尝试的所有内容似乎都失败了。如何更改引导模式2

点击与“body_btnrewardsmodal”的ID的按钮时，将模态打开。

这是我的失败尝试。

HTML：

<div id="ajax-rewards-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="h3RewardsTitle" aria-hidden="false" style="display: block;"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="h3RewardsTitle">donut</h3> 
    </div> 
    <div class="modal-body"> 
     <div id="divgiveafew"> 
      <iframe> 
       <!DOCTYPE html> 
       <html class="phone desktop-device firefox"> 
       <head></head> 
       <body class="PopupWindow" onload="window.focus();"> 
       <div class="row"> 
       <div class="span02"> 
        text 
       </div> 
       </div> 
      </body> 
      </html> 
      </iframe> 
     </div> 
    </div> 
</div>

JS：

$(document).on('click', '#body_btnrewardsmodal', function() { 
    $('#divgiveafew iframe').load(function(){ 
     if ($('#divgiveafew iframe').contents().find('body').children().length > 0) { 
      console.log('loaded'); 
      $('this').contents().find('.span02').prepend('<div class="alert alert-info" class="padding:8px;"><p style="margin:0">Some text</p> <ul class="unstyled inline"><li>#courageous</li><li>#innovative</li><li>#passionate</li><li>#adaptable</li><li>#honest</li><li>#thinkbig</li></ul></div>'); 
     } else { 
      console.log('not loaded'); 
     } 
    }); 
});

来源

2015-09-04 Mike Hague

谢谢@ Zl3n我需要一些HTML代码添加到div /类（.span02）发现嵌套在iframe中在一个模式。我可以编码这一切都错了:( –

什么我现在想要的吗？不知道我还能说什么？我想通过JS，但它不工作（如上）改变iframe的HTML。 –

请编辑您的帖子，并告诉我什么是iframe内的代码。目前还不清楚对我来说 – Zl3n

随着你的HTML，你已经调用的模态。那么当模态为shown时，您必须添加一个事件。在那里，您构建了要插入iframe的div。

最后，当你在模式的，你搜索的iframe，获取其内容等在前面加上了你刚刚构建的内容。

$(this).find('iframe').contents().prepend(alert);

HTML返工：

<div id="ajax-rewards-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="h3RewardsTitle" aria-hidden="false" style="display: block;"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="h3RewardsTitle">donut</h3> 
    </div> 
    <div class="modal-body"> 
     <div id="divgiveafew"> 
      <iframe src="https://fortawesome.github.io/Font-Awesome/"></iframe> 
     </div> 
    </div> 
</div> 

<!-- Button to open the modal --> 
<a href="#ajax-rewards-modal" role="button" class="btn btn-info" data-toggle="modal">Open modal</a>

而且JS：

$(document).ready(function() { 

    $('#ajax-rewards-modal').on('shown', function() { 

     var alert = $('<div>', {'class' : 'alert alert-info', 'css' : {'padding' : '8px'}}); 
     $('<p>', {'css' : {'margin' : 0}, 'text' : 'Some Text'}).appendTo(alert); 
     var ul = $('<ul>', {'class' : 'unstyled inline'}).appendTo(alert); 
     $('<li>', {'text' : '#courageous'}).appendTo(ul); 
     $('<li>', {'text' : '#innovative'}).appendTo(ul); 
     $('<li>', {'text' : '#passionate'}).appendTo(ul); 
     $('<li>', {'text' : '#adaptable'}).appendTo(ul); 
     $('<li>', {'text' : '#honest'}).appendTo(ul); 
     $('<li>', {'text' : '#thinkbig'}).appendTo(ul); 

     $(this).find('iframe').contents().prepend(alert); 
    }); 
});

来源

2015-09-04 17:09:09 Zl3n

如何更改引导模式2

回答

相关问题