开发者社区> 问答> 正文

jquery弹出框选择器的问题?

小旋风柴进 2016-05-31 08:56:42 830

最近用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"});
    });

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

前端开发 JavaScript
分享到
取消 提交回答
全部回答(2)
  • 一生有你llx
    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"});
    });
    0 0
  • 小旋风柴进
    2019-07-17 19:21:13

    大概这样吧:

    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"});
        });
    0 0
添加回答

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程