Создание "всплывающего" представления для покрытия представления коллекции

#javascript #jquery #html #css #materialize

#javascript #jquery #HTML #css #материализовать

Вопрос:

В настоящее время я не понимаю, как создать представление с помощью javascript как своего рода «всплывающее окно», которое закрывало бы почтовый ящик при попадании в ячейку для отображения ее конкретной информации.

В настоящее время мой код для почтового ящика выглядит следующим образом (ячейки генерируются динамически):

         <div class="row">
          <div class="col s8">
            <div class="collection-header center">
              <h4>Email Box</h4>
            </div>
            <ul class="collection with-header">
              <div id="mailCollection">
              <!-- Dynamically Add These Cells To this view -->
              </div>
            </ul>
          </div>

Вот как это выглядит:

Ячейки создаются следующим образом:

   for(var i = 0; i < data.length; i  ){
     $("#mailCollection").append("<a id='"    data[i]["id"]    "'style='color:grey' href='#' onClick='displayMessage(this)'><li class='collection-item avatar email-unread gray'><span class='circle green darken-1'></span><span class='email-title'>"
       "Sample"   "</span><p class='truncate grey-text ultra-small'>"
       "Sample"    "</span> <p class='truncate blue-text ultra-small'>"
       "Sample"   "</p> <a href='#' class='secondary-content email-time'><span class='gray-text ultra-small'>"
       '<label> <input type="checkbox" class="filled-in" checked="checked"/> <span>Check</span> </label>'
       "</span></li></a>")
   }

Как бы мне создать представление, которое охватывало бы представление коллекции, чтобы я мог отображать содержимое сообщения с помощью кнопки для отключения подробного представления?

1. Ответил, скажите нам, работает ли это!

2. Мне придется поиграть с некоторыми вещами, потому что я не могу заставить modal полностью охватить представление коллекции, но, спасибо, это определенно направило меня в правильном направлении!

3. Если вы хотите адаптироваться к своему #mainColection , поставьте #mainColection with position relative , затем #mymodal to position absolute , и очень важно иметь top, right, left, and bottom to 0 ! И проверьте поля и отступы проводника по умолчанию с помощью Explorer inspector!

Ответ №1:

Лучший способ для меня — определить модальный div, который по умолчанию имеет свойство display none. Затем вы можете отображать с фиксированной позицией или абсолютной позицией в зависимости от того, что вам нужно:

Если вы хотите охватить весь экран, ваша модальная позиция фиксирована, и вы можете поместить div в любом месте вашего кода.

В противном случае, если вы хотите покрыть только одну зону, поместите свой модал в div, который вы хотите покрыть, и поместите родительский div с относительной позицией.

 <div id='mymodal'>
   <div class='header'>
      <div id='modalclose'>X</div>
   </div>
   <div class='content'>

   </div>
</div>

И css:

 #mymodal{
    display: none;
    position: fixed; /* Or absolute*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0; 
    z-index: 0;
}
#mymodal.active{
    display: block;
    z-index: 999;
}

Затем вам нужно только управлять классом и содержимым, например, с помощью jquery click:

 $(".sample").click(function(){
   $("#mymodal .content").html('') //Clean html inside
   $("#mymodal .content").html('<h1>Here fill for example title</h1>') //Inner html inside
   $("#mymodal").addClass('active')
})

И для закрытия модального сделайте то же самое:

 $("#modalClose").click(function(){
    $("#mymodal").removeClass('active')
})

И есть!

Если вы хотите получить лучшую анимацию, измените display: none; на opacity: 0 ; и display:block; на opactity: 1; и добавьте transition: 1s; в #mymodal

Надеюсь, это поможет!