Создание «всплывающего» представления для отображения представления коллекции - PullRequest
Новая
       11

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

0 голосов
/ 09 марта 2019

В настоящее время я не совсем понимаю, как создать представление с помощью 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>

Вот как это выглядит: enter image description here

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

  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 Ответ

0 голосов
/ 09 марта 2019

Лучший способ для меня - определить модальный 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: 

$(".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

Надеюсь, это будет полезно!

...