创建一个“弹出”视图以覆盖集合视图

Question

我目前对如何通过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>")
   }

我将如何创建一个覆盖集合视图的视图，以便可以通过按钮显示消息的内容以关闭详细视图？

Answer 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，即可：

$(".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;，并在#mymodal中添加transition: 1s;

希望这会有所帮助！