Open news detail in modal

[christophbee]

How to open news detail view in modal?

I want to open the NEWS (from Georg Ringer) detail view in a default bootstrap modal. After clicking an article's more link in news list view the content of the detail page shall be display in a modal. What is the easiest way to achieve this?

Thank you for your inputs!

[rumpfwerk]

Hey @christophbee. This ist not a question regarding to the BTP. Perhaps better use the TYPO3-Slack channel #ext-news for this. A good start is using the bootstrap-templates, shipped with des news-extension. you have to change some things (eg. img-fluid), because the news-templates are still designed for bootstrap 3 and the BTP is using bootstrap 4. Copy the shipped news-templates and set the right news-template path to the news place. search for the right template (listitem or so) and modify it.

[christophbee]

@rumpfwerk thank you for your reply. Yes, you're right that it has not only to do with the BTP. But basically I just want to know how to open an internal link inside a modal box which must not necessarily be a news detail page.

As BTP delivers basically all kind of BT features I just thought maybe there's a well-known way to open links in a modal, e.g. just by adding a special class to the link or button.

[rumpfwerk]

Hello @christophbee . never worked with modals before in BTP. I think, CSS should be delivered and you only need a little JS to implement it.

BT-Modal are working with css/js. https://getbootstrap.com/docs/4.0/components/modal/ you have to implement the code in the templates.

[christophbee]

I found a solution now. For all who are interested in it how I did it:

First I customized the NEWS List template and added an empty modal box (according to bootstrap documentation). Furthermore I created another custom page template where only the main content colPos gets rendered without any header, footer, navigation. I assigned this page layout to the news detail page.

Then I added some javascript that loads the content from this detail page into the modal box. When done, the modal get's visible.

$('.news-list-view .article a').on('click',function(){
        showLoader();
        var dataURL = $(this).attr('href');

       $('.modal-body .loaded-content').load(dataURL,function(){
           hideLoader();
           $('#newsDetailModal').modal('show');
        });
        return false;
    });