jquery - クリック時ではなくロード時

Question

次のコードがあります。

jQuery(function ($) {
    var OSX = {
        container: null,
        init: function () {
            $("input.apply, a.apply").click(function (e) {
                e.preventDefault(); 

                $("#osx-modal-content").modal({
                    overlayId: 'osx-overlay',
                    containerId: 'osx-container',
                    closeHTML: null,
                    minHeight: 80,
                    opacity: 65, 
                    position: ['0',],
                    overlayClose: true,
                    onOpen: OSX.open,
                    onClose: OSX.close
                });
            });
        },
        open: function (d) {
            var self = this;
            self.container = d.container[0];
            d.overlay.fadeIn('fast', function () {
                $("#osx-modal-content", self.container).show();
                var title = $("#osx-modal-title", self.container);
                title.show();
                d.container.slideDown('fast', function () {
                    setTimeout(function () {
                        var h = $("#osx-modal-data", self.container).height()
                            + title.height()
                            + 20; // padding
                        d.container.animate(
                            {height: h}, 
                            200,
                            function () {
                                $("div.close", self.container).show();
                                $("#osx-modal-data", self.container).show();
                            }
                        );
                    }, 300);
                });
            })
        },
        close: function (d) {
            var self = this; // this = SimpleModal object
            d.container.animate(
                {top:"-" + (d.container.height() + 20)},
                500,
                function () {
                    self.close(); // or $.modal.close();
                }
            );
        }
    };

    OSX.init();

});

このスクリプトをロードするには、「適用」クラスのボタンをクリックする必要があります... ボタンをクリックせずにこのスクリプトを「オンロード」でロードする方法を知っている人はいますか?

私は多くのことを試しましたが、Javascriptに関しては初心者です。

ありがとう！

Answer 1

クリック イベント リスナーを削除し、モーダル作成を init() のルートにプルするだけです。

jQuery(function ($) {
var OSX = {
    container: null,
    init: function () {

            $("#osx-modal-content").modal({
                overlayId: 'osx-overlay',
                containerId: 'osx-container',
                closeHTML: null,
                minHeight: 80,
                opacity: 65, 
                position: ['0',],
                overlayClose: true,
                onOpen: OSX.open,
                onClose: OSX.close
            });
    },
    open: function (d) {
        var self = this;
        self.container = d.container[0];
        d.overlay.fadeIn('fast', function () {
            $("#osx-modal-content", self.container).show();
            var title = $("#osx-modal-title", self.container);
            title.show();
            d.container.slideDown('fast', function () {
                setTimeout(function () {
                    var h = $("#osx-modal-data", self.container).height()
                        + title.height()
                        + 20; // padding
                    d.container.animate(
                        {height: h}, 
                        200,
                        function () {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();
                        }
                    );
                }, 300);
            });
        })
    },
    close: function (d) {
        var self = this; // this = SimpleModal object
        d.container.animate(
            {top:"-" + (d.container.height() + 20)},
            500,
            function () {
                self.close(); // or $.modal.close();
            }
        );
    }
};

OSX.init();

});

jQuery ラッパーのため、ページが読み込まれるまでコードを呼び出すべきではありません。

Answer 2

ready()jQueryの機能をご覧ください。

元：

$(document).ready(function () {
   $("p").text("The DOM is now loaded and can be manipulated.");
});

Answer 3

下部に追加:

window.onload = OSX.init;