Integrera modal dialogruta med hjälp av inbyggd ThickBox i WordPress

Modala dialoger måste ibland nödvändigtvis integreras med en WordPress-webbplats. Med hjälp av modal dialog kan vi visa innehållet högst upp på den aktuella sidan.

När det gäller modal pop-up föredrar folk normalt att använda Lightbox eller Fancybox- biblioteket. Dessa är de populära biblioteken och fungerar ganska bra.

För att inkludera dessa bibliotek i WordPress måste vi ladda ner JS- och CSS-filer från ett bibliotek och inkludera det i projektet på vanligt sätt. Efter det, enligt biblioteksdokumentationen, måste vi lägga in innehåll, ring metoden för att öppna modalfönstret.

WordPress inkluderade ThickBox jQuery-plugin med modifierad version i sin kärna. Och det kan användas i stället för externa bibliotek. Med den här kärnfunktionen får vi gränssnittet som är detsamma som modala popup-fönster i WordPress-admin som på medieknappen.

Du kan prova den här inbyggda funktionen. Om det uppfyller dina behov sparar det tid att integrera externt bibliotek.

Med ThickBox med inbyggt innehåll får du utdata ungefär som visas i skärmdumpen nedan.

Dialogrutan Modal med hjälp av ThickBox

WordPress ThickBox fungerar bra med det integrerade innehållet. Man kan också använda kortkod i modaldialogen. Som ett exempel kan du visa kontaktformulär i modalfönstret med hjälp av kortformuläret för kontaktformulär 7.

Med detta sagt, låt oss se hur man använder ThickBox i WordPress.

Till exempel visar vi inbyggt dummyinnehåll genom att klicka på ankartaggen. Så placera koden nedan vart du vill använda ThickBox.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

För att använda Thichbox måste vi inkludera den första add_ThickBox()metoden. Den här funktionen laddar biblioteket från kärnan. Därefter måste vi på href-attributet på ankartaggen skicka #TB_inline tillsammans med bredd, höjd och id för en container där vårt inbyggda innehåll är insvept.

Samma sätt om du behöver visa kontaktformuläret i modaldialogen, istället för dummyinnehåll måste du placera kortkod med do_shortcode()WordPress-funktionen.

<?php echo do_shortcode('[shortcode_here]'); ?>

Det är allt! Vi hoppas att du förstår hur du lägger till en modal dialogruta med ThickBox i WordPress. Vi vill höra dina tankar i kommentaren nedan.

Du kanske också vill läsa våra artiklar Omdirigera till tack-sida efter kontaktformulär 7-inlämning och hur man sparar kontaktformulär 7-inlämningar till WordPress-databas