Welcome to my demo. You should be able to breakout any code block via a popover by clicking a button.
btn.classList.add('breakoverAct');
btn.innerHTML = '⛶';
btn.title = 'Expand';
btn.addEventListener('click', function(){
if(!el.popover){
el.setAttribute('popover', 'auto');
el.showPopover();
el.setAttribute('data-breakover', 'open');
}else{
el.hidePopover();
}
});
el.addEventListener('toggle', function(e){
if(e.newState === 'closed'){
el.removeAttribute('popover');
el.setAttribute('data-breakover', '1');
}
});
toolbar.appendChild(btn);
});
};
if(doc.readyState === 'loading'){
doc.addEventListener('DOMContentLoaded', main);
}else{
main();
}
}else{
main = function(){};
}
var str = `Lorem ipsum dolor sit amet nonummy.
Omnis ut sunt eum voluptatem est.
Error nihil eius rem qui dolor.
Saepe quia quis corporis omnis est quam neque quam.
Et hic nulla iusto distinctio dignissimos iure.
Voluptas quia repudiandae assumenda.
Eum tenetur qui laudantium consequatur aut voluptas suscipit.
Quo qui nostrum voluptatem ut eos.
Ipsa saepe aut rerum incidunt porro quod quas.
Aut aliquam dolorem distinctio omnis. Lorem ipsum dolor sit amet nonummy. Error nihil eius rem qui dolor.
Possimus qui voluptas voluptatem.
Necessitatibus sit molestiae similique.
Aut eveniet beatae beatae blanditiis reiciendis enim.
Ut reprehenderit quia maxime quia.
Quod facere ipsa ut blanditiis recusandae quos explicabo aut.
Reiciendis fuga expedita dolore.
Enim aut aut maxime debitis quia beatae.`
This should work across multiple code blocks.
[data-breakover]:popover-open{
margin: auto;
max-height: 90vh;
max-height: 96dvh;
max-width: 90vw;
max-width: 96dvw;
overflow: auto;
position: fixed;
@media screen and (min-width: 32em){
max-height: 90vh;
max-width: 90vw;
}
}
Lorem ipsum dolor sit amet nonummy. Omnis ut sunt eum voluptatem est. Error nihil eius rem qui dolor. Saepe quia quis corporis omnis est quam neque quam. Et hic nulla iusto distinctio dignissimos iure. Voluptas quia repudiandae assumenda.
Eum tenetur qui laudantium consequatur aut voluptas suscipit. Quo qui nostrum voluptatem ut eos. Ipsa saepe aut rerum incidunt porro quod quas. Aut aliquam dolorem distinctio omnis. Possimus qui voluptas voluptatem. Necessitatibus sit molestiae similique. Aut eveniet beatae beatae blanditiis reiciendis enim. Ut reprehenderit quia maxime quia. Quod facere ipsa ut blanditiis recusandae quos explicabo aut. Reiciendis fuga expedita dolore. Enim aut aut maxime debitis quia beatae.