Question

我日复一日地使用jquery越来越好了，但仍然有些事情我不知道如何总结几个函数来减少一些代码。

所以我使用了三个jquery模式对话框弹出窗口，我编写了很多代码，使它们都能正常工作。但是，我认为应该可以将所有代码简化为更简单的东西。

这就是我所做的......

JS

$("#dialog1").dialog({
    modal: true,
    autoOpen: false,
    minWidth: 600,
    show: {
        effect: "fadeIn",
        duration: 500
    },
    hide: {
        effect: "fadeOut",
        duration: 1000
    },
    open: function () {
        jQuery('.ui-widget-overlay').bind('click', function () {
            jQuery('#dialog1').dialog('close');
        })
    }
});
$("#opener1").click(function () {
    $("#dialog1").dialog("open");
    $('.ui-widget-overlay').css('background', 'black');
});

$("#dialog2").dialog({
    modal: true,
    autoOpen: false,
    minWidth: 600,
    show: {
        effect: "fadeIn",
        duration: 500
    },
    hide: {
        effect: "fadeOut",
        duration: 1000
    },
    open: function () {
        jQuery('.ui-widget-overlay').bind('click', function () {
            jQuery('#dialog2').dialog('close');
        })
    }
});
$("#opener2").click(function () {
    $("#dialog2").dialog("open");
    $('.ui-widget-overlay').css('background', 'black');
});

$("#dialog3").dialog({
    modal: true,
    autoOpen: false,
    minWidth: 600,
    show: {
        effect: "fadeIn",
        duration: 800
    },
    hide: {
        effect: "fadeOut",
        duration: 300
    },
    open: function () {
        jQuery('.ui-widget-overlay').bind('click', function () {
            jQuery('#dialog3').dialog('close');
        })
    }
});
$("#opener3").click(function () {
    $("#dialog3").dialog("open");
    $('.ui-widget-overlay').css('background', 'black');
});

HTML：

    <div id="dialog1" title="Ihr Einkaufsgutschein">
    <p>Einfach auf den Gutschein klicken und die Grafik ausdrucken, oder herunterladen. Anschließend Gutschein beim nächsten Einkauf bei <b>Möbel Hornung</b> vorzeigen und 100,- Euro sparen.</p>
    <p style="font-size: 12px; font-style:italic;">* Nur ein Gutschein pro Person und Einkauf einlösbar. Nur gültig bis Samstag, den 11. April 2015.</p>
</div>
<div id="dialog2" title="Sonder-Finanzierung mit 0% effektivem Jahreszins">
    <p>Finanzierung über unsere Hausbank: Commerz Finanz GmbH, Schwanthalerstr. 31, D-80336 München, ab 500,- Bonität vorausgesetzt, Laufzeit 6-36 Monate, Barzahlungspreis entspricht dem Nettodarlehensbetrag sowie dem Gesambetrag, Effektiver Jahreszins und gebundener Sollzins enspricht 0,0%. Nur gültig für Neuaufträge bis 14.03.15.</p>
</div>
<div id="dialog3" title="5 Jahre Garantie auf alle Möbel-Teile">
    <p>Wir verpflichten uns für eine Kulanzleistungszeit von 5 Jahren ab Lieferung der Küchenmöbel kostenlosen Ersatz für alle solche Küchenmöbel und Küchenmöbelteile zur Verfügung zu stellen, die nachweisbar bei sachgerechtem Gebrauch, nicht gewerblicher Nutzung und Beachtung der Pflege- und Montageanleitung infolge von Material- und Herstellungsfehlern mangelhaft sind. Der Mangel muss innerhalb der Kulanzleistungszeit aufgetreten und angezeigt worden sein. Dies Verpflichtung besteht nicht für die gelieferten Elektrogeräte und Zubehörteile (Spülen, Abfallsammler etc.) sowie die in Möbelelementen verbauten Elektroteile. Bei diesen gelten die Garantiebestimmungen des jeweiligen Herstellers. Ein Anspruch auf Nachlieferung oder Nachbesserung von nicht mehr verfügbaren Teilen besteht nicht.</p>
</div>  <a href="#!" id="opener1">
            <img src="http://hornung.eprospekt.info/neu/assets/images/Kreis_Button_Gutschein.png" alt="Gutschein" style="left: 27px; top: 1790px; z-index: 50; " class="pageItem" />
        </a>
    <a href="#!" id="opener2">
            <img src="http://hornung.eprospekt.info/neu/assets/images/Kreis_Button_Finanzierung.png" alt="Finanzierung" style="left: 357px; top: 1790px; z-index: 50; " class="pageItem" />
        </a>
    <a href="#!" id="opener3">
            <img src="http://hornung.eprospekt.info/neu/assets/images/Kreis_Button_Garantie.png" alt="Garantie" style="left: 685px; top: 1790px; z-index: 50; " class="pageItem" />
        </a>

here is a fiddle 我所做的事情。

我希望你能帮助我总结这个凌乱的js以获得好看的代码。提前谢谢你们。感谢stackoverflow和像你这样的人，我学到了很多东西。

需要帮助总结3个jquery模态对话框函数

0 个答案: