<!DOCTYPE html>
<html>
<head>
<title>Bulma Modal</title>
<link rel='stylesheet' href=
<script src=
</script>
<style>
div.columns {
margin-top: 50px;
}
.modal-content {
margin-top: 100px;
width: 450px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<div class='has-text-centered'>
<button class="button is-primary"
id='btn'>
Twitter Messages
</button>
</div>
<div class="modal">
<div class="modal-background">
</div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src =
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>GeekforGeeks</strong>
<small>@geekforgeeks</small>
<small>36m</small>
<br>
Hey, There!
<br>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction .
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-reply"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-retweet"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-heart"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
<button class="modal-close is-large"
aria-label="close">
Model
</button>
</div>
</div>
</div>
</div>
<script>
// Bulma does not have JavaScript included,
// hence custom JavaScript has to be
// written to open or close the modal
const modal =
document.querySelector('.modal');
const btn =
document.querySelector('#btn')
const close =
document.querySelector('.modal-close')
btn.addEventListener('click',
function () {
modal.style.display = 'block'
})
close.addEventListener('click',
function () {
modal.style.display = 'none'
})
window.addEventListener('click',
function (event) {
if (event.target.className ===
'modal-background') {
modal.style.display = 'none'
}
})
</script>
</body>
</html>