javascript - 创建一个 "popup" View 以覆盖 Collection View

Question

我目前对如何通过 javascript 创建一个 View 感到困惑，作为一种“弹出窗口”，当点击一个单元格以显示其特定信息时，它会覆盖邮箱。

目前我的邮箱代码如下(cells动态生成):

        <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>")
   }

我如何创建一个覆盖 Collection View 的 View ，以便我可以使用关闭详细 View 的按钮来显示消息的内容？

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;

希望对您有所帮助!