2
\$\begingroup\$

I am getting better with jquery day by day, but there are still things I don't know how to sum up several functions to reduce some code.

So I am using three jquery modal dialog popups and I have written a lot of code to make them all work fine. However, I believe it should somehow be possible to reduce all the code into much simpler stuff.

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>

And here is a fiddle of what I have done.

\$\endgroup\$
1
\$\begingroup\$

There are a couple of things that can be improved

  • Don't Repeat Yourself: you can condense all three dialog initialisers in a single call; same for all three click-opens
  • Be consistent: don't mix different notations for the same thing: $ and jQuery, .bind('click' and .click
  • Eliminate redundant calls: the .ui-widget-overlay's background will never change, might as well put it in a <style> tag

For the first point, all you need is to make use of the this attribute. All of jQuery's event handlers bind it to the current element for convenience. You can then edit the only differing options in the last initialiser separately:

$("#dialog1, #dialog2, #dialog3").dialog({
    modal: true,
    autoOpen: false,
    minWidth: 600,
    show: {
        effect: "fadeIn",
        duration: 500
    },
    hide: {
        effect: "fadeOut",
        duration: 1000
    },
    open: function () {
        var that = this;
        $('.ui-widget-overlay').click(function () {
            $(that).dialog('close');
        })
    }
});
$("#dialog3").dialog("option", "show.duration", 800);
$("#dialog3").dialog("option", "hide.duration", 300);

As for the opener# links, the usual convention is to use a data-* attribute to indicate what you're opening:

<a href="#!" id="opener1" data-target="#dialog1">... 

And then:

$("#opener1, #opener2, #opener3").click(function () {
    $($(this).data("target")).dialog("open");
});

Notice also you don't need the .ui-widget-overlay style in there. You can just directly add it to the CSS:

<style type="text/css">
.ui-widget-overlay {
    background: black;
}
</style>

Here's an update on the fiddle: http://jsfiddle.net/h4stz76s/2/

\$\endgroup\$
  • \$\begingroup\$ wow @blgt that is a lot of improvement! thank you so much for the help plus the great explanation. I am really happy. Works like a charm and is way easier to understand. \$\endgroup\$ – Supapinzi Feb 11 '15 at 12:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.