Использование нескольких модальных диалогов на одной странице

У меня есть страница, где мне нужно щелкнуть ссылки на правой стороне и левой стороне и отобразить модальные диалоги. Я вижу на загрузочном сайте, что код для каждого модального диалога составляет не менее 10 строк html. Если у меня есть 10 ссылок на странице, что лучше всего делать, чтобы иметь код для 10 диалогов? Я помещаю весь HTML для диалогов на одну и ту же страницу.html?

Ответ 1

Чтобы расширить ответ, предоставленный Phoenix, inline означает, что вы хотите, чтобы контент загружался, когда страница загружается и может быть легко доступна. Таким образом, yo поместил бы все 10 модалов на странице, поэтому, когда страница загрузит контент, он будет уже там, а затем вы будете просто ссылаться на каждый модальный отдельно.

Таким образом, вы бы поставили 10 кнопок или ссылок независимо от того, что вы выбрали, и поместите атрибут data-target в соответствующий модальный код следующим образом:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

И тогда вы бы поставили 10 модалов с разными ID, как показано ниже.

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Это было бы лучше, если бы вы хотели, чтобы поисковые системы индексировали содержимое модалов, и если вы хотите, чтобы модалы были легко доступны и быстро загружались.

Или вы можете просто поместить один модальный на страницу и загрузить весь свой контент удаленно, хотя ajax.

Таким образом, ваша ссылка будет выглядеть так:

<a data-toggle="modal" href="Path/To/Code/Snippet" data-remote="Path/To/Code/Snippet" data-target="#myModal">Modal</a>

И вы просто поместите один из модалов на страницу и загрузите весь свой контент через этот модальный. Ваши html-фрагменты, которые вы можете назвать myhtmlsnippet.php, и поместите их в атрибуты href и data-remote. Тогда только фрагменты html будут загружены в модальное тело одного модального.

Затем вы должны добавить следующий скрипт, чтобы каждый раз, когда модальный объект закрывает его, он очищает контент от модального.

<script>
$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".modal-body").html('');
});
</script>

Это хорошо для таких вещей, как видео и т.д. Если у вас есть 10 разных видеороликов, которые вы хотите загрузить, для загрузки вашей страницы потребуется слишком много времени. Но поисковые системы не свяжут этот удаленно загруженный контент со страницей, на которой находятся ваши ссылки, они будут искать их по отдельности, а с тех пор это всего лишь фрагменты кода, которые вы захотите использовать robots.txt, чтобы они не индексировали эти фрагменты.

Вы также можете создавать полные html-страницы и просто загружать один div из этой страницы в ваш модальный динамически. Это лучше для seo, и вам не нужно исключать контент с помощью robots.txt. Ниже приведена полная html-страница с рабочим примером. Они, очевидно, не будут работать, если вы не работаете на сервере, так как ajax загружается сервером, но вы можете копировать и вставлять их, чтобы увидеть, как они работают. Кроме того, вы захотите реструктурировать модальную форму, как я сделал ниже, и переделать ее так, как будто у меня ниже, как загрузочная загрузка удаленной загрузки своих модальных загрузок в модальный контент. Я также добавил класс clearable-content в modal-content и изменил сценарий jquery, поэтому, если у вас есть другие модалы на странице, он не очистит их содержимое только динамически загруженным контентом. Вот рабочий пример.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.modal-title {
  text-align:center;
  font-size:20px;
  font-weight:bold;
}
@media screen and (min-width: 768px){
  #myModal .modal-dialog {
    webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
#myModal .modal-header {
  border-radius: 5px 5px 0 0;
  background-color:#fff;
}
#myModal .modal-content {
  background-color:#fff;
  border-radius: 0;
  padding:20px;
  box-shadow: none;
  background-clip:inherit;
}
#myModal .modal-footer {
  background-color:#fff;
  border-radius: 0 0 5px 5px;
}
</style>
</head>
<body>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <p class="modal-title">My Dynamic Modal</p>
      </div>
      <!-- Modal content-->
      <div class="modal-content clearable-content">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
  </div>
</div>


<a data-toggle="modal" href="2.html" data-remote="1.html #modal-section" data-target="#myModal">Page 1 Modal Content</a>
<br /><br />
<a data-toggle="modal" href="3.html" data-remote="2.html #modal-section" data-target="#myModal">Page 2 Modal Content</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).on('hidden.bs.modal', function (e) {
    var target = $(e.target);
    target.removeData('bs.modal')
    .find(".clearable-content").html('');
});
</script>
</body>
</html>

Затем вы сделали бы другую страницу html, как показано ниже. Я назвал ее 1.html в ссылках выше, но вы можете назвать ее чем угодно и просто изменить ее в своих ссылках на главной странице.

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
      <p>Some Other Page Content</p>
      <div id="modal-section">
           My modal content
      </div>
</body>
</html>

Этот метод немного лучше для seo, а затем создает фрагменты, и если поисковая система индексирует ваш сайт, они могут индексировать ваш контент модалов, и когда люди свяжутся с ним, им будет доступна полная страница. Они по-прежнему не будут связывать ваш контент модалов с исходной страницей, но они будут следовать ссылке и индексировать страницы по отдельности.

Надеюсь, это все облегчит вам.

Ответ 2

Это зависит от того, как вы хотите загрузить содержимое ваших диалогов.

Если вы хотите их встроить, да, вы должны поместить весь html на главную страницу. Поэтому, когда пользователь нажимает на ссылку, контент уже существует и может быть немедленно отображен.

Если вы хотите, чтобы они загружались только тогда, когда кто-то нажал ссылку, вы можете использовать iframe внутри модального файла или использовать ajax для загрузки частичного контента. проверьте удаленный раздел в модальной документации.

Или, если вы хотите встроенный модальный, но ваши модалы имеют немного другой контент, вы можете проверить этот http://getbootstrap.com/javascript/#modals-related-target