所以我有一个带有几个按钮的标题,我想要的功能是:
按一个按钮,下拉列表显示
按另一个按钮,该模态消失,另一个立即打开。
有没有办法实现这个目标?目前我有“$ .modal.close();”在内容打开之前,内容仍会打开,但它会自动触发onClose事件,从而阻止它打开另一个模式。
var content;
jQuery(function ($) {
var OSX = {
container: null,
init: function () {
$(".buttonOne,").click(function (e) {
e.preventDefault();
$.modal.close();
content = "#osx-modal-content-ONE";
$(content).modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
maxHeight:599,
opacity: 65,
position: ['60px',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
$(".buttonTWO,").click(function (e) {
e.preventDefault();
$.modal.close();
content = "#osx-modal-content-TWO";
$(content).modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
maxHeight:599,
opacity: 65,
position: ['60px',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
$("#osx-overlay").css("top","60px");
d.overlay.fadeIn('fast', function () {
d.container.slideDown('fast', function () {
setTimeout(function () {
$(content, self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
0,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 0);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
200,
function () {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});