jQuery或Angular实现弹出框单击显示,双击隐藏

用jQuery实现:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .menu_level1{
            width:500px;
            height:auto;
            margin:50px auto;
        }
        .menu_level1>li{
            position: relative;
            float: left;
            list-style-type: none;
            height:30px;
        }
        .menu_level1>li>a{
            padding:10px 15px;
            font-size:16px;
        }
        .menu_level2{
            position:absolute;
            top:30px;
            left:0;
            padding:20px;
            height:100px;
            background-color:#fff;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 2px 2px 2px #eee;
            display: none;
        }
        .menu_level1>li:hover{
            background-color:pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="menu_level1">
        <li><a>哈哈</a></li>
        <li><a>嘿嘿</a></li>
        <li><a>呼呼</a></li>
        <li><a>点我</a>
          <div class="menu_level2">哈罗,我是一块板砖,哪里需要哪里搬。。。。。</div>
        </li>
    </ul>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(".menu_level1 li").click(function(){
        if($(this).hasClass("curr")){
            $(this).removeClass("curr");
            $(".menu_level2").hide();
        }else{
            $(".menu_level2").show();
            $(this).addClass("curr");
        }
    });
    $(document).click(function(e){
        var target = $(e.target);
        if(target.closest(".menu_level1").length != 0) return;
        $(".menu_level2").hide();

    });
</script>
</html>

然而,用angular实现,轻松的几句代码即可完成

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .menu_level1{
            width:500px;
            height:auto;
            margin:50px auto;
        }
        .menu_level1>li{
            position: relative;
            float: left;
            list-style-type: none;
            height:30px;
        }
        .menu_level1>li>a{
            padding:10px 15px;
            font-size:16px;
        }
        .menu_level2{
            position:absolute;
            top:30px;
            left:0;
            padding:20px;
            height:100px;
            background-color:#fff;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 2px 2px 2px #eee;
        }
        .menu_level1>li:hover{
            background-color:pink;
            cursor: pointer;
        }
    </style>
</head>
<body ng-controller="myCtrl">
    <ul class="menu_level1">
        <li><a>哈哈</a></li>
        <li><a>嘿嘿</a></li>
        <li><a>呼呼</a></li>
        <li ng-click="show()"><a>点我</a>
          <div class="menu_level2" ng-show="showDiv">哈罗,我是一块板砖,哪里需要哪里搬。。。。。</div>
        </li>
    </ul>
</body>
<script src="angular.js"></script>
<script>
   var app = angular.module("app",[]);
    app.controller("myCtrl",function($scope){
        $scope.showDiv = false;
        $scope.show = function(){
            $scope.showDiv = !$scope.showDiv;
        };
    });
</script>
</html>
时间: 2024-10-15 22:30:39

jQuery或Angular实现弹出框单击显示,双击隐藏的相关文章

用jQuery实现页面遮罩弹出框

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"> <p cl

jquery使用dialog调用弹出框

1.jquery可以调用弹出框,语法如下: $.dialog("open",        {      id:'dialog',            name : 'create-guide',            title : '创建结果:',            html : $('#review-result').html(),            width : 460,            frameScrolling : 'no',         close

弹出框页面居中显示的两种方法

原文地址:http://blog.csdn.net/chueia/article/details/68927501 第一种: position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; //height:30%; 这种方法在元素的宽高不固定时会全屏拉伸元素,在高度不固定靠子元素撑开自适应的情况下不适用.但是在宽高固定的情况下可以用,没有兼容性问题. 第二种: position:fixed; top:50%; left:50%; t

自定义弹出框效果

对网站而言,弹出框是比较常见的.或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等. 但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调,且不同浏览器有不同的默认样式设置. 所以在日常工作中,给网站做一个自定义的弹出框十分必要.特别是富交互的网站 一.提示框 html部分: 1 <!--修改弹窗--> 2 <div class="pop-alert" id="pop" style

弹出框,添加出行人员,追加提交方法,H5检查OK再调用ajax提交到controller

01传递参数,显示或者隐藏弹出框 /*start 显示和隐藏遮罩*/ function controlShade(date){ if(date == 's'){ $(".mask").show(); $(".maskbox").stop().animate({"margin-top":10+"px"},300); }else if(date == 'h'){ $(".maskbox").stop().ani

四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些 常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

面遮罩弹出框已经不是一个陌生的话题了,实现的方法大同小异多种多样,今天用jQuery实现页面遮罩弹出

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog">

自定义popup弹出框

ys_popup.css .ys-popup{     position:fixed;     top:0;     bottom:0;     left:0;     right:0;     display:none;     z-index: 99999;     background-color: rgba(0,0,0,0.4); } .ys-popup .ys-popup-content{     position:absolute;     left:30px;     right:

custombox.js 插件如何点空白处不隐藏弹出框 overlayClose属性的应用

bootstrap中使用了custombox.js 插件,如下代码 <button  href="/systems/application/add" data-target="custom-modal" type="button" class="btn_common btn-success waves-effect waves-light" data-animation="fadein" data-o