开发者社区> 问答> 正文

jquery弹出框选择器的问题?

最近用jquery写点击按钮弹出弹出框,后来发现,要对每类行为的弹出框都要一对一的写一个选择器,后面的方法代码差不多一样,这样产生了好多的重复代码。以后弹出框一多岂不是想class名都要想半天更别说维护了。请问大家有什么好办法没有,这样的情况同样见于弹出框的绝对居中定位,每个框的宽高不同。css代码也不一样,即使用JS操作css也还是会产生一堆类似的重复代码。感觉到有点迷茫,个人感觉是不是要把这样相同功能的函数封装起来,只传不同的参数、变量就行了?求指教。`

请输入代

$(".popup_title a,.bottom_btn").click(function(){
        $(this).parents(".popup_bg").fadeOut(200);
    });
    $(".tc_banzhu").click(function(){
        $(".banzhuDon").fadeIn(200);
        var tc_hgt = $(".banzhuDon .popup_box").height()/2;
        var tc_wid = $(".banzhuDon .popup_box").width()/2;
        $(".banzhuDon .popup_box").css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
    });
    $(".tc_ban").click(function(){
        $(".banDon").fadeIn(200);
        // var tc_hgt = $(".banDon .popup_box").height()/2;
        // var tc_wid = $(".banDon .popup_box").width()/2;
        // $(".banDon .popup_box").css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
    });
    $(".tc_banner").click(function(){
        $(".bannerDon").fadeIn(200);
        // var tc_hgt = $(".bannerDon .popup_box").height()/2;
        // var tc_wid = $(".bannerDon .popup_box").width()/2;
        // $(".bannerDon .popup_box").css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
    });

情况就像上面那样差不多= =

展开
收起
小旋风柴进 2016-05-31 08:56:42 2234 0
2 条回答
写回答
取消 提交回答
  • 专注物联网

    function bindClick(cls1, cls2) {

    $(cls1).click(function(){
        $(cls2).fadeIn(200);
        var popupBox = $(cls2 + " .popup_box");
        var tc_hgt = popupBox.height()/2;
        var tc_wid = popupBox.width()/2;
        popupBox.css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
    });
    2019-07-17 19:21:14
    赞同 展开评论 打赏
  • 大概这样吧:

    function bindClick(cls1, cls2) {
        $(cls1).click(function(){
            $(cls2).fadeIn(200);
            var popupBox = $(cls2 + " .popup_box");
            var tc_hgt = popupBox.height()/2;
            var tc_wid = popupBox.width()/2;
            popupBox.css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
        });
    2019-07-17 19:21:13
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载