项目实训(十一) —— 详情页弹窗

页面展示的数据，有些过长，换行不一。为了更好地统一布局效果，指导老师及经理提点为：增加详情窗口，并在原页面统一一行，超出部分省略。于是本篇就介绍这一块的实现过程。

首先确定为弹窗的形式，那么之前的CSS弹窗遮罩效果复写如下：

/*结果页面弹窗*/
.window_appear_r{
    position: relative;
    top: 130px;
    background: ghostwhite;
    width: 20%;
    height: 45%;
    border-radius: 5px;
    margin: 5% auto;
}


/*详情页面弹窗*/
.window_appear_inform{
    position: relative;
    padding-top: 30px;
    background: ghostwhite;
    width: 30%;
    height: 58%;
    border-radius: 5px;
    margin: 10% auto;
}

HTML里面的弹窗部分，写入完整的数据：

<div class="window_behind" id={{ loop.index }}>
	<div class="window_appear_inform">
                <img class = 'pic_inform' src= {{ meals.url }} alt="没有上传图片" />
                <h2>菜名：{{ meals.food_name }}</h2>
                <h3>原料：{{ meals.food_infor }}</h3>
                <h3 id='t'>上传时间：{{ meals.time }}</h3>                 
        </div>
</div>

发现关键量，loop.index，这是jianjia2的for循环内的循环变量，正好可以用来标记我随着for循环写出的弹窗体的id。以上代码以成功利用到了这一量。

套路再用，控制函数在循环内，也随着loop.index写出多份，其中js代码第一行是关掉弹窗，起初是关闭态：

<script>
  document.getElementById({{ loop.index }}).style.display = "none";
  function show_inform_{{ loop.index }}() {
        document.getElementById({{ loop.index }}).style.display = "";
  }

  function close_inform_{{ loop.index }}() {
        ocument.getElementById({{ loop.index }}).style.display = "none";
  }
</script>

设置内、外按钮，控制弹窗显示与关闭：

<input  class="button_inform" type="submit" value="详"
        onclick="show_inform_{{ loop.index }}()"/>

<input  class="button_close_inform" type="submit" value="返回菜谱"
        onclick="close_inform_{{ loop.index }}()"/>

原页面过长行的省略，CSS直接搞定：

.limit_line{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

最终效果：

后续的样式调整，操作比较普通，只是繁琐，不再赘述。