Открыть DIV в родительском окне плавающего фрейма

Question

У меня есть страница, которая имеет IFrame на другую страницу и то, что я ищу, это нажать на кнопку с этим кодом внутри фрейма:

<td class="id-center">     
    <div class="bs-example"> 
     <a id="comments" href="comments.php?id=$id" name="comments" value="$id" data-toggle="modal" data-target=".bs-example-modal-lg\" class="btn btn-primary btn-default center-1"><span class="glyphicon glyphicon-comment"></span></a> 
    </div> 
</td> 

, который затем может открыть следующую накладку выскочит окно в родительском окне:

<!-- Large modal --> 

<div style="width:90%;" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myLargeModalLabel">Add a comment</h4> 
     </div> 
     <!-- Body of popup --> 
     <div class="modal-body"> 
      Test 
     </div> 
    </div> 
    </div> 
</div> 

Я делаю это с Bootstrap 3. Любая помощь будет оценен по достоинству!

Answer 1

Один из способов, которым вы могли бы это сделать, - открыть модальный скрипт через javascript apt. Ключом к выполнению этой работы является использование атрибута iframe parent для доступа к родительскому документу. Вы можете проверить это JSFiddle, чтобы узнать, что я имею в виду. К сожалению, он настроен как-то странно, потому что iframe не может получить доступ к javascript-окну JSFiddles (или я просто не знаю, как это сделать), но контент, который вы увидите в iframe, встроен в его свойство srcdoc. Дайте мне знать, если что-либо из этого требует объяснения.

Answer 2

window.document.body.insertAdjacentHTML('afterbegin', "<div id='overlay' style='height: 100em;background-color:#000; opacity:0.4; width: 100%;z-index: 1000;position: fixed;'><div style='height: 100%;width: 70px;margin: auto;'><img src='/spinner.gif' style='height: 70px;margin-top: 40vh;'/></div></div>") 

Это добавит оверлей к вашему родительскому телу, но это будет работать только в том случае, если обе страницы в одном домене.