如何更改引導模式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

回答

相關問題