Загрузка содержимого modal после его открытия.

[D'Jack]

Добрый день! Имею вот такой код (использую bootstrap )

<div class="col-md-5">
  <a href="#" data-toggle="modal" data-target="#myModal">Ссылка, на модельное окно </a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          <br>
          <iframe id="iframe1" src="https://www.nulled.cc/" width="100%" height="500px;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Он открывает модальное окно с фреймом сайта допустим Для просмотра ссылки Войди или Зарегистрируйся.

При загрузке страницы с моим кодом содержимое фрейма грузится как обычная часть кода по своей очереди, а если таких кусков у меня на странице 100 штук, полная загрузка произойдет когда подрузятся все эти 100 сайтов во фреймах.

Что я хочу: сделать загрузку содержимого фрейма только после открытия модального окна. Подскажите как, пожалуйста!

 

[Горбушка]

Ты вот этот код генерируй не сразу, а через JS... Посмотри как в DLE сделано.

 

[ZiX]

Добрый день! Имею вот такой код (использую bootstrap )

<div class="col-md-5">
  <a href="#" data-toggle="modal" data-target="#myModal">Ссылка, на модельное окно </a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          <br>
          <iframe id="iframe1" src="https://www.nulled.cc/" width="100%" height="500px;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Он открывает модальное окно с фреймом сайта допустим Для просмотра ссылки Войди или Зарегистрируйся.

При загрузке страницы с моим кодом содержимое фрейма грузится как обычная часть кода по своей очереди, а если таких кусков у меня на странице 100 штук, полная загрузка произойдет когда подрузятся все эти 100 сайтов во фреймах.

Что я хочу: сделать загрузку содержимого фрейма только после открытия модального окна. Подскажите как, пожалуйста!

Есть же события...
Тип События Описание
show.bs.tab Это событие срабатывает на отображение вкладки, но перед тем, как новая вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
shown.bs.tab Это событие срабатывает на отображение вкладки, после того, как вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})

Для просмотра ссылки Войди или Зарегистрируйся почитайте тут.

 

[D'Jack]

Есть же события...
Тип События Описание
show.bs.tab Это событие срабатывает на отображение вкладки, но перед тем, как новая вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
shown.bs.tab Это событие срабатывает на отображение вкладки, после того, как вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно - на активную вкладку и предыдущую активную вкладку (при наличии).
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})

Для просмотра ссылки Войди или Зарегистрируйся почитайте тут.

Простите за мою тупизну , вот так?

<div class="col-md-5">
  <a href="#" data-toggle="modal" data-target="#myModal">Ссылка, на модельное окно </a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          <br>
          <iframe id="iframe1" src="https://www.nulled.cc/" width="100%" height="500px;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $('a[data-toggle="modal"]').on('shown.bs.modal', function (e) {
  e.target
  e.relatedTarget
  })
</script>

 

[ZiX]

Простите за мою тупизну , вот так?

<div class="col-md-5">
  <a href="#" data-toggle="modal" data-target="#myModal">Ссылка, на модельное окно </a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          <br>
          <iframe id="iframe1" src="https://www.nulled.cc/" width="100%" height="500px;"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $('a[data-toggle="modal"]').on('shown.bs.modal', function (e) {
  e.target
  e.relatedTarget
  })
</script>

Я дал ссылку.. Прочтите документацию...