How to add transparent pop up pages to blogger post in 5 mintues

Back>

Example

copy the following code into the blogger post's HTML tab, replace the contents in the div with class="text" for your own purpose.

<style>
.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

.text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}
</style>

<script>

function On(id) {
    document.getElementById(id).style.display = "block";
}

function Off(id) {
    document.getElementById(id).style.display = "none";
}
</script>

<br />
<div class="overlay" id="iterable" onclick="Off('iterable')">
<div class="text">
<div>
public interface Iterable&lt;T&gt;</div>
<ul>
<li>default void forEach(Consumer&lt;super ? E&gt; action)</li>
<li>Iterator&lt;T&gt; iterator()</li>
<li>default&lt;T&gt; Spliterator spliterator()</li>
</ul>
</div>
</div>
<br />
<div class="overlay" id="set" onclick="Off('set')">
<div class="text">
public interface Set&lt;E&gt; extends Collection&lt;E&gt;<br />
Set's methods have exactly the same signatures as those of Collection, however, the intended methods implementation is different. Set methods' javadoc is more specific for a collection that can not have duplicate elements.</div>
</div>
<br />
<div style="padding: 20px;">
<h2>
java.util.* interfaces</h2>
<button onclick="On('iterable')">Iterable</button>
<button onclick="On('set')">Set</button>
</div>