Auch heute habe ich für euch mal wieder ein spannnedes jQuery Abenteuer vorbereitet. Ihr seht diese Funktion fast täglich – in irgendwelchenwelchen PopUps die ihr auf Webseiten seht – Cookie Warnungen oder so – ist diese Technik fast immer eingebaut worden.
Genau heute zeige ich euch wie ihr so ein einfaches Pop Up in eure eigene Webseite einbauen könnt. Wie immer braucht man dafür nur jQuery, ein paar Zeilen Code und dann läuft das ding bereits.
Video
JS Links
Denkt daran, wenn ihr im DSGVO Bereich lebt, dann müsst ihr diese Files herunterladen und innerhalb eurer Webseite verlinken. Wenn ihr das nicht müsst, dann könnt ihr die Links in einem CDN Netzwerk auch finden wie zb hier: https://cdnjs.com/libraries. Dann muss man nämlich nichts herunterladen und kann diese Daten auslagern.
1 2 3 4 5 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
HTML
Das Pop up wird mit diesem HTML Code definiert. Wie ihr sicherlich schon herausgefunden habt, der Title ist der Titel und der Lorem Impsum Fülltext ist euer Text 🙂
1 2 3 | <div id="message" title="ultra mega wichtige news">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt deserunt hic sequi atque ut, placeat quasi quas accusamus pariatur cum facere provident. Omnis non eos facere cumque culpa doloribus ratione.</p>
</div> |
Wenn ihr nun das Pop Up durch ein Klick auf ein Element auslösen wollt, dann braucht ihr natürlich ein Button oder ein Link wie den hier. Vergesst einfach nicht die auslösende ID einzubauen.
1 | <button id="opener">Open Dialogbox</button> |
jQuery Befehle
Und so könnt ihr also das jQuery Pop-Up konfigurieren. Auch für diese Funktion gibts noch viele andere Befehle die man in der API Dokumentation nachlesen kann – hier ist sie verlinkt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script>
$('#message').dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "blind",
duration: 500
}
});
$('#opener').click(function(){
$('#message').dialog('open');
});
</script> |
0 Kommentare