Jquery自定义模式插件

我正在尝试使用jQuery构建一个模式插件。如果我必须只调用一个模态，那么它工作得很好，但是当页面中有更多的模态时，两个模态都会被调用，或者如果尝试更改代码，有时只调用一个模态。我想以点击时具有相同id的模态为目标。如果您不知道代码有什么问题，我们将非常感谢您的帮助。代码如下所示

你可以查看演示

这是密码

CSS

HTML

名称
电子邮件
消息
提交
名称
提交

JavaScript

(function () {
    var someglobal = $('.modal');

    // Modal Functinonality
    var contactform = {
        container: $(someglobal),
        config: {
            effect: 'slideToggle',
            speed: 500,
        },
        // Initial Function
        init: function (config) {
            $.extend(this.config, config);
            var id = $('.modal').attr('id');
            var newv = $('a').data('target');

            sv = $('a').data('target');
            $('a[data-target]').on('click', this.show);

            function modal() {
                var wid = $('div').data('width');
                cont = $(someglobal)
                wid = $(cont).css({
                    'width': wid + 'px',
                });

                wid = $(cont).css({
                    'left': ($(window).width() - $(cont).width()) / 2 + 'px',
                        'top': ($(window).height() - $(cont).height()) / 2 + 'px'
                });
            }

            // Adding modal on resize and dom ready
            $(document).ready(modal);
            $(window).resize(modal);

            console.log(someglobal.attr('id'));
        },
        // Show Function
        show: function () {
            var cf = contactform,
                //container = cf.container,
                config = cf.config
                $new = $(this).data('target'),
                console.log(someglobal);

            if (sv == $(someglobal).attr("id")) {
                cf.close.call(someglobal);
                cf.fadediv.call(someglobal);
                someglobal[config.effect](config.speed);
            }
        },

        // Close function   
        close: function () {
            var $this = $(this);            
            if ($this.find('span.close').length) return;

            $('<span class=close>x</span>')
                .prependTo(this)
                .on('click', function () {
                $this[contactform.config.effect](contactform.config.speed);
                $('body').find('div.backdrop').fadeOut(300);
            })
        },
        // Backdrop Fade div    
        fadediv: function () {
            $('<div></div>', {
                class: 'backdrop'
            })
                .appendTo('body');
        }
    };

    // Custom overide for sure
    contactform.init({
        effect: 'fadeToggle',
        speed: 300
    });
})();

（函数（）{
var someglobal=$（'.modal'）；
//模态函数性
var contactform={
容器：$（someglobal），
配置：{
效果：“滑动切换”，
速度:500,，
},
//初始函数
初始化：函数（配置）{
$.extend（this.config，config）；
变量id=$（'.modal'）.attr（'id'）；
var newv=$（'a'）。数据（'target'）；
sv=$（'a'）。数据（'target'）；
$（'a[data target]'）。在（'click'，this.show'）；
函数模态（）{
var wid=$（'div'）。数据（'width'）；
cont=$（someglobal）
wid=$（续）.css({
“宽度”：wid+“px”，
});
wid=$（续）.css({
'左'：（$（window.width（）-$（cont.width（））/2+'px'，
'top'：（$（window.height（）-$（cont.height（））/2+'px'
});
}
//在调整大小和dom就绪时添加模态
$（文件）。就绪（模式）；
$（窗口）。调整大小（模式）；
log（someglobal.attr（'id'）；
},
//显示功能
显示：函数（）{
var cf=联系方式，
//容器=cf.container，
config=cf.config
$new=$（this）.data（'target'），
console.log（someglobal）；
if（sv=$（someglobal.attr（“id”））{
cf.close.call（someglobal）；
cf.fadediv.call（someglobal）；
someglobal[config.effect]（配置速度）；
}
},
//闭合函数
关闭：函数（）{
var$this=$（this）；
if（$this.find（'span.close'）.length）返回；
$（'x'）
.prependTo（本）
.on（'单击'，函数（）{
$this[contactform.config.effect]（contactform.config.speed）；
$（'body'）.find（'div.background'）.fadeOut（300）；
})
},
//背景淡入淡出div
fadediv:函数（）{
$('', {
课堂：“背景”
})
.附于（“主体”）；
}
};
//当然是定制的
contactform.init({
效果：“fadeToggle”，
航速：300
});
})();

正如我看到的，您总是在someglobal上操作，这是DOM中所有modal的列表。相反，您应该只对数据目标选择的模式进行操作，并使用该模式的id

<> P>另一件事你可以考虑的是重构你的插件。通常，您会获得一个选择器作为参数，然后对该选择器选择的所有元素执行循环。比如：

(function($){
    $.fn.yourmodal=function(selector,options){
        this.each(function(i, target){
            // and here you do your job for target
        });
    }
})();

在这种情况下，您可以在页面中添加类似的内容：

$(document).ready(function(){
    $.yourmodal(".modal");
});

---

您的插件将更加通用、可重用。

您需要为model div指定唯一的类名。 HTML

---

谢谢你的更新，但是你能给我看一个演示吗，这样我就能更好地理解它了。在行动中：

(function($){
    $.fn.yourmodal=function(selector,options){
        this.each(function(i, target){
            // and here you do your job for target
        });
    }
})();

$(document).ready(function(){
    $.yourmodal(".modal");
});

<div id="contactme" data-width="400" data-toggle="modal" class="modal1">
...

<div id="contactyou" data-width="400" data-toggle="modal" class="modal2">
...

 var someglobal = $('.modal1'); // or model2