创建一个 "popup" 视图以覆盖集合视图

Question

我目前对如何通过 javascript 创建一个视图感到困惑，作为一种 "pop-up" 当点击一个单元格以显示其特定信息时会覆盖邮箱。

目前我的邮箱代码如下（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>")
   }

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

Answer 1

对我来说最好的方法是定义一个模式 div，默认情况下有一个显示 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;
}

然后，您只需要控制class和内容，例如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;

希望对您有所帮助！

创建一个 "popup" 视图以覆盖集合视图

Creating a "popup" view to to cover a collection view

html

javascript

css

jquery

materialize