Question

我正在尝试使用jQuery构建一个模态插件。如果我只需要调用一个模态但是当页面上的模态更多时，它可以正常工作，如果尝试更改代码，则调用模态或者有时只调用一个模态。我想定位点击时具有相同ID的模态。不知道代码有什么问题，帮助会非常感激。代码如下。

您可以查看演示http://jsfiddle.net/A9AtV/

这是代码

CSS

body {
    margin:0;
    font-family:'Droid Sans', sans-serif;
    font-size:13px;
    line-height:20px;
    color:#333;
}
h1 {
    font-size:40px;
    color:#dd7e2a;
}
a {
    text-decoration:none;
}
form, button {
    font-family:'Droid Sans', sans-serif;
}
article {
    padding:10px;
}
.modal {
    background:#fff;
    border:3px solid #dd7e2a;
    width:600px;
    padding:10px;
    position:absolute;
    display:none;
    z-index:2;
}
.controls {
    width:100%;
    margin:0 0 20px 0;
}
.controls label {
    width:100%;
    display:block;
}
.close {
    position:absolute;
    right:-10px;
    top:-10px;
    background:#fff;
    padding:3px 10px;
    border-radius:50%;
    text-align:center;
    border:3px solid #dd7e2a;
    color:#333;
    font-size:bold;
    cursor:pointer;
}
.backdrop {
    width:100%;
    height:100%;
    position:fixed;
    background:rgba(47, 175, 102, 0.8);
    top:0;
    left:0;
    z-index:1;
}
form button, .contact {
    text-align:center;
    margin:0 auto;
    display:block;
    background:#fff;
    outline:none;
    border:3px solid #dd7e2a;
    line-height:30px;
    cursor:pointer;
    padding:0 10px;
    transition:all 1s ease;
    color:#dd7e2a;
    max-width:100px;
}
form button:hover, .contact:hover {
    border-color:rgba(47, 175, 102, 0.8);
    color:rgba(47, 175, 102, 0.8);
}
form {
    padding:20px;
}
body form textarea {
    height:50px;
}
body form button {
    margin:0;
}
form input, form textarea {
    border:2px solid #dd7e2a;
    height:25px;
    width:300px;
    transition:all 0.6s ease;
    color:#dd7e2a;
    outline:none;
}
form input:focus, form textarea:focus {
    border-color:rgba(47, 175, 102, 0.8);
}

HTML

<div id="contactme" data-width="400" data-toggle="modal" class="modal">
    <form>
        <div class="controls">
            <label>Name</label>
            <input type="text" name="name">
        </div>
        <div class="controls">
            <label>Email</label>
            <input type="email" name="email">
        </div>
        <div class="controls">
            <label>Message</label>
            <textarea name="msg"></textarea>
        </div>
        <div class="controls">
            <button type="submit">Submit</button>
        </div>
    </form>
</div>
<div id="contactyou" data-width="400" data-toggle="modal" class="modal">
    <form>
        <div class="controls">
            <label>Name</label>
            <input type="text" name="name">
        </div>
        <div class="controls">
            <button type="submit">Submit</button>
        </div>
    </form>
</div>
<a href="#" data-target="contactme" class="contact">First Button</a><br>
<a href="#" data-target="contactyou" class="contact">Second Button</a>

的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
    });
})();

Answer 1

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

您可能考虑的另一件事是重新调整您的插件。通常，您将选择器作为参数，然后对该选择器选择的所有元素进行循环。类似的东西：

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

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

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

并且您的插件将更加通用，可重复使用。

Answer 2

您需要为模型div提供唯一的类名称。 HTML

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

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

并在Javascript中传递您需要的模态类

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

Jquery自定义模态插件

2 个答案: