[朗读900字]

有时候为了页面整体布局需要会隐藏一些内容,这时上一个“超链接”指个路是很有必要的。下面就截取一段点击链接弹出提示层代码,供学习参考。
首先,在</head>之前,或随意什么地方上一个样式。

<style>
.cont { 
    display: none; 
    position: fixed; 
    top: 40%;
    left: 50%;
    margin-top: -10%;
    margin-left: -35%; 
    width: 70%; 
    height: 50%; 
    border: 10px solid #ddd; 
    background-color: lightblue; 
    color: #000000;
    z-index:1; 
    overflow: auto; 
} 
</style>

其次,在<body>中需要展示“超链接”的地方添加如下代码即可。

<a onclick = "document.getElementById('cont_b').style.display='block'">点击显示隐藏内容</a>

<div id="cont_b" class="cont"><div style="padding:10px">
    <a onclick = "document.getElementById('cont_b').style.display='none'">关闭</a>
        <ul><li>这里是隐藏的内容。</li></ul>
    </div></div>

标签: none



已有 2 条评论

  1. 这个,我想起了2008年左右直接写js的年代

    1. Leow Leow 博主

      代码简单,但很实用。

添加新评论


最近回复