js控制div层的叠加简单方法


Posted in Javascript onOctober 15, 2016

如下所示:

<style type="text/css">
.favorite_icon{float:left; padding: 0 0 0 30px;}
.favorite_label{float:left; width:950px;}
.favorite_label h2{  border-bottom: medium none;height: 60px;padding: 0.8em 0 0 0px;}
.favorite_title{height:60px;margin:0px auto 12px auto;}
.favorite_title a:link, .favorite_title a:visited {color: #333; background-color:#8bb65a;}
.favorite_title a:hover {color: #333;text-decoration: none; background-color:#6c9541;}
.add_favorite {border-radius: 0;color: #fff !important;font-family: "宋体","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 12px;line-height: 17px;padding: 5px 16px;float: right !important;border: medium none;
 height: 18px;background-image: none;cursor: pointer;display: inline-block;font-weight: 400;margin-bottom: 0;
 text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;}
#favorite_count{color:#303030;font-size:12px;padding: 0 0 0 7px;}
.favorite_list{clear:both; padding: 0 10px 200px 10px;}
.list_type li{float:left;line-height: 17px;} 
.list_type a{text-decoration: none;font-size: 15px;}
.list_type a:link {color: #6c9541;}
.list_type a:visited{color: #333;}
.list_type a:hover {color: #6c9541;text-decoration: none;}
.list_line{clear:both;height:10px; margin-bottom:10px;border-bottom:1px groove #ccc;}
.nums{font-weight:bold;}
.t1{border-bottom:1px dotted #ccc;height: 40px;padding: 0.8em 0 0 30px;}
.list_content{clear:both;}
.list_content h3{float:left; width:763px;}
.list_content a{text-decoration:none; display:block;font-family: "宋体","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 15px;color: #333; float:left; }
.list_content a:link, .favorite_title a:visited {color:#333;text-decoration: none;}
.list_content a:hover {color: #bb1c20;text-decoration: none; }
.date{color:#ccc;font-size:13px;padding: 0 0 0 7px;float:left !important;text-align: center; 
     vertical-align: middle;white-space: nowrap;text-decoration: none; }
.edit{ margin: 0 0 0 20px;}
.delete{ margin: 0 0 0 10px;}

.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;
  background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.10;filter:alpha(opacity=80);}
.white_content{display:none;position:absolute;top:15%;left:25%;width:500px;height:250px;padding:16px;
  border:1px solid #ccc;background-color:white;z-index:1002;overflow:auto;}
.white_content a{float:right; color:#aca7a7;text-decoration: none;}
.form-group{clear:both; margin:10px 0 10px 0;}
.control-label{float:left; margin:10px 0 10px 30px;color:#aca7a7;}
#url,#title{width:330px;height:23px;border:solid 1px #ccc; background:#f8f8f8;color:#8d8585;}
.col-xs-9{float:left; margin:10px 0 10px 10px;}
.btn-default,.btn-primary{float:right; width:80px;border-radius: 0;color: #fff !important;
    font-family: "宋体","Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 14px;
    padding: 5px 18px;text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;}
.btn-default{border:solid 1px #ccc; background:#9a9a9a;color:#fff;margin:15px 20px 0 0;}
.btn-default:hover {background:#8d8585;}
.btn-primary{border:solid 1px #ccc; background:#8bb65a;color:#fff;margin:15px 78px 0 0;}
.btn-primary:hover {background:#6c9541;}
</style>

<div class="favorite_title">
    <div class="favorite_label">
      <img class="favorite_icon" width="48" height="48" src="http://127.0.0.1/phpcms/statics/images/favorite/favorite_icon_48_48.jpg"/>
      <h2>  收藏<span id="favorite_count">(n个)</span>
      <a class="add_favorite" href="javascript:void(0)" onclick="add_shoucang();">添加收藏</a>
      </h2>
    </div>
  </div>

  <div class="favorite_list">
    <div class="list_type">
      <ul class="all">
       <li> <a href="#>全部(<span class="nums"></span>)</a></li>
       <li> <a href="#">钢琴谱(<span class="nums"></span>)</a></li>
       <li> <a href="#">钢琴曲(<span class="nums"></span>)</a></li>
      </ul>
    </div>

    <div class="list_line">
    </div>

    <div class="list_content">
      <ul class="navigation" id="navigation">
        {loop $info $r}
        <li class="t1"> 
         <a href="#" ><label class="shoucangId" id="shoucangId" style="display:none;">{$r[id]}</label>
                <h3>{$r[title]}</h3></a>
         <span class="date">{date("Y-m-d",$r[inputtime])}</span>
         <a class="edit" href="javascript:void(0)" onclick="edit_shoucang();">
         <img alt="编辑" src="http://127.0.0.1/phpcms/statics/images/favorite/edit.jpg"/></a>
         <a class="delete" href="JavaScript:void(0)" onclick="ConfirmDel();">
         <img alt="删除" src="http://127.0.0.1/phpcms/statics/images/favorite/delete.jpg"/></a>
         </li>
        {/loop}
        <li class="t1"> 
        </li>
      </ul>
    </div>
  </div>
  </div>  
  
  <div id="light" class="white_content">
  <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
  <span>关闭</span></a>
  <br>
  <h2 style="color:#999292;">添加收藏</h2>
  <div class="form-group">
    <label for="url" class="control-label col-xs-2"><span>*</span>网址:</label>
    <div class="col-xs-9">
       <input id="url" type="text" name="url" class="form-control" value=" http://"/>
    </div>
  </div>
  
  <div class="form-group">
    <label for="title" class="control-label col-xs-2"><span>*</span>标题:</label>
    <div class="col-xs-9">
      <input id="title" type="text" name="title" class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label for="title" class="control-label col-xs-2"><span>*</span>类别:</label>
    <div class="col-xs-9">
     <label id="m1" >
      <input type="radio" name="radio" id="radio_pu" value="钢琴谱" checked="checked"/><span>钢琴谱</span></label>
     <label id="m2"><input type="radio" name="radio" id="radio_qu" value="钢琴曲" /><span>钢琴曲</span></label>
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-xs-5 text-right">
       <input type="submit" value="收藏" name="dosumbit" class="btn btn-primary"/> 
       <button type="button" class="btn btn-default" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</button>
    </div>
  </div>

<script type="text/javascript">
//添加收藏
function add_shoucang()
{
  document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block';
  $("#title").val('');
  $("#url").val('http://');
  $("#shoucnag_id").val('');
  $("input[name='radio'][value='钢琴谱']").attr("checked",true);
}

//删除
function ConfirmDel() 
{
  var _id;
  if(confirm('确定删除?')) 
   {
     $('.navigation>li').click(function(){
      var iVal = $(this).index();
      $('.navigation>li').eq(iVal).hide();  
    });
   } 

   else 
   {
   document.getElementById('light').style.display='none';
   document.getElementById('fade').style.display='none'
   }
}
</script>

【效果预览】

js控制div层的叠加简单方法

js控制div层的叠加简单方法

以上就是小编为大家带来的js控制div层的叠加简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
详解CocosCreator项目结构机制
Apr 14 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 #Javascript
js控制li的隐藏和显示实例代码
Oct 15 #Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 #Javascript
JS常用函数和常用技巧小结
Oct 15 #Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 #Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 #Javascript
原生JS实现的放大镜效果实例代码
Oct 15 #Javascript
You might like
15种PHP Encoder的比较
2007/03/06 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
捐款活动总结
2014/08/27 职场文书
保安辞职信范文
2015/02/28 职场文书
同学聚会通知短信
2015/04/20 职场文书
公司员工离职感言
2015/08/03 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python