0
我想建立一個使用jQuery的模態插件。如果我只需要調用一個模態，但是當頁面中有更多的模態時，它就可以正常工作，無論是模態的調用還是有時只有一次，如果嘗試更改代碼。我想定位點擊時具有相同ID的模式。不知道代碼有什麼問題，幫助將非常感激。代碼如下。Jquery自定義模式插件
您可以查看演示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
});
})();
很抱歉，莫代爾類.. – LegendaryAks