Interactive Virtual Divine Mercy Chaplet

index.html

<div style="text-align:left;margin-top:9%">
<center><i>Instructions</i><br>
Click on the white beads as you say the prayers. Click on the link for prayers.</center><p>
<center><b>Introductory prayers</b><p></center>
You expired, Jesus, but the source of life gushed forth for souls, and the ocean of mercy opened up for the whole world. O Fount of Life, unfathomable Divine Mercy, envelop the whole world and empty Yourself out upon us.
<p><br>
O Blood and Water, which gushed forth from the Heart of Jesus as a fountain of Mercy for us, I trust in You! (x3)
<br><p>

<p class="radioP"> 
  <input type="radio" name="name" id="r1" /> 
  <label for="r1"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal1">Our Father</a>

  <div id="openModal1" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Our Father</h2>
    
    <p>Our Father who art in heaven,
Hallowed be thy name.
Thy kingdom come.
Thy will be done
on earth as it is in heaven.
Give us this day our daily bread,
and forgive us our trespasses,
as we forgive those who trespass against us,
and lead us not into temptation,
but deliver us from evil.</p>
</div>
</div> 
  </label>
  <p>
  <p class="radioP"> 
  <input type="radio" name="name" id="r2" /> 
  <label for="r2"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal3">Hail Mary</a>

  <div id="openModal3" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Hail Mary</h2>
    
    <p>Hail Mary, full of grace,
the Lord is with thee;
blessed art thou amongst women,
and blessed is the fruit of thy womb, Jesus.
Holy Mary, Mother of God,
pray for us sinners,
now and at the hour of our death. Amen.</p>
</div>
</div> 
  </label>
<p>
  <p class="radioP"> 
  <input type="radio" name="name" id="r4" /> 
  <label for="r4"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal5">Apostles' Creed</a>

  <div id="openModal5" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Apostles' Creed</h2>
    
  <p>I believe in God, the Father almighty, Creator of heaven and earth, and in Jesus Christ, his only Son, our Lord, who was conceived by the Holy Spirit, born of the Virgin Mary, suffered under Pontius Pilate, was crucified, died and was buried; he descended into hell; on the third day he rose again from the dead; he ascended into heaven, and is seated at the right hand of God the Father almighty; from there he will come to judge the living and the dead. I believe in the Holy Spirit, the holy catholic Church, the communion of saints, the forgiveness of sins, the resurrection of the body, and life everlasting. Amen.
</p>
</div>
</div> 
  </label>
  <br>
<p class="radioP"> 
  <input type="radio" name="name" id="r5" /> 
  <label for="r5"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal6">Eternal Father</a>

  <div id="openModal6" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Eternal Father</h2>
    
    <p>Eternal Father, I offer you the Body and Blood, Soul and Divinity of Your Dearly Beloved Son, Our Lord, Jesus Christ, in atonement for our sins and those of the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r7"  /> 
  <label for="r7"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal7">For the sake</a>

  <div id="openModal7" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>For the sake</h2>
    
    <p>For the sake of His sorrowful Passion, have mercy on us and on the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r8"  /> 
  <label for="r8"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r9"  /> 
  <label for="r9"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r10"  /> 
  <label for="r10"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r11"  /> 
  <label for="r11"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r12"  /> 
  <label for="r12"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r13"  /> 
  <label for="r13"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r14"  /> 
  <label for="r14"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r15"  /> 
  <label for="r15"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r16"  /> 
  <label for="r16"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<br>
<p class="radioP"> 
  <input type="radio" name="name" id="r17" /> 
  <label for="r17"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal8">Eternal Father</a>

  <div id="openModal8" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Eternal Father</h2>
    
    <p>Eternal Father, I offer you the Body and Blood, Soul and Divinity of Your Dearly Beloved Son, Our Lord, Jesus Christ, in atonement for our sins and those of the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r18"  /> 
  <label for="r18"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal9">For the sake</a>

  <div id="openModal9" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>For the sake</h2>
    
    <p>For the sake of His sorrowful Passion, have mercy on us and on the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r19"  /> 
  <label for="r19"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r20"  /> 
  <label for="r20"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r21"  /> 
  <label for="r21"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r22"  /> 
  <label for="r22"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r23"  /> 
  <label for="r23"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r24"  /> 
  <label for="r24"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r25"  /> 
  <label for="r25"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r26"  /> 
  <label for="r26"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r27"  /> 
  <label for="r27"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 

<br>
<p class="radioP"> 
  <input type="radio" name="name" id="r28" /> 
  <label for="r28"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal0">Eternal Father</a>

  <div id="openModal0" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Eternal Father</h2>
    
    <p>Eternal Father, I offer you the Body and Blood, Soul and Divinity of Your Dearly Beloved Son, Our Lord, Jesus Christ, in atonement for our sins and those of the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r29"  /> 
  <label for="r29"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal11">For the sake</a>

  <div id="openModal11" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>For the sake</h2>
    
    <p>For the sake of His sorrowful Passion, have mercy on us and on the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r30"  /> 
  <label for="r30"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r31"  /> 
  <label for="r31"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r32"  /> 
  <label for="r32"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r33"  /> 
  <label for="r33"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r34"  /> 
  <label for="r34"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r35"  /> 
  <label for="r35"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r36"  /> 
  <label for="r36"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r37"  /> 
  <label for="r37"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r38"  /> 
  <label for="r38"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<br>
<p class="radioP"> 
  <input type="radio" name="name" id="r39" /> 
  <label for="r39"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal12">Eternal Father</a>

  <div id="openModal12" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Eternal Father</h2>
    
    <p>Eternal Father, I offer you the Body and Blood, Soul and Divinity of Your Dearly Beloved Son, Our Lord, Jesus Christ, in atonement for our sins and those of the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r40"  /> 
  <label for="r40"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal13">For the sake</a>

  <div id="openModal13" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>For the sake</h2>
    
    <p>For the sake of His sorrowful Passion, have mercy on us and on the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r41"  /> 
  <label for="r41"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r42"  /> 
  <label for="r42"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r43"  /> 
  <label for="r43"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r44"  /> 
  <label for="r44"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r45"  /> 
  <label for="r45"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r46"  /> 
  <label for="r46"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r47"  /> 
  <label for="r47"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r48"  /> 
  <label for="r48"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p>
<p class="radioP"> 
  <input type="radio" name="name" id="r49"  /> 
  <label for="r49"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<br>
<p class="radioP"> 
  <input type="radio" name="name" id="r50" /> 
  <label for="r50"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal14">Eternal Father</a>

  <div id="openModal14" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Eternal Father</h2>
    
    <p>Eternal Father, I offer you the Body and Blood, Soul and Divinity of Your Dearly Beloved Son, Our Lord, Jesus Christ, in atonement for our sins and those of the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r51"  /> 
  <label for="r51"> 
    <span class="radioButtonGraph"></span> 
    <a href="#openModal15">For the sake</a>

  <div id="openModal15" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>For the sake</h2>
    
    <p>For the sake of His sorrowful Passion, have mercy on us and on the whole world.</p>
</div>
</div> 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r52"  /> 
  <label for="r52"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r53"  /> 
  <label for="r53"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r54"  /> 
  <label for="r54"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r55"  /> 
  <label for="r55"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r56"  /> 
  <label for="r56"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r57"  /> 
  <label for="r57"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r58"  /> 
  <label for="r58"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
<p class="radioP"> 
  <input type="radio" name="name" id="r59"  /> 
  <label for="r59"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p>
<p class="radioP"> 
  <input type="radio" name="name" id="r60"  /> 
  <label for="r60"> 
    <span class="radioButtonGraph"></span> 
    For the sake 
  </label> 
</p> 
</div>
<br>
<center><b>Holy God</b><p>
Holy God, Holy Mighty One, Holy Immortal One, have mercy on us and on the whole world. x3 
<p>
<b>Concluding Prayer</b>
<p>
Eternal God, in whom mercy is endless and the treasury of compassion — inexhaustible, look kindly upon us and increase Your mercy in us, that in difficult moments we might not despair nor become despondent, but with great confidence submit ourselves to Your holy will, which is Love and Mercy itself.</center>
<br>
<!-- Please do not remove the below items-->
Interactive Virtual Divine Mercy Chaplet originally published by <a href="http://www.gotomary.com">Go to Mary</a>. <p>To see more free code and for other Catholic information please see <a href="http://www.gotomary.com">Go to Mary</a>.
<br>

<style>
.radioP { 
  display: block; 
  position: relative; 
  margin: 20px 0; 
  padding-left:40px; 
   
  font-family:arial; 
} 
.radioP:first-child { 
 margin:0 0 20px 0;  
} 
 
input[type="radio"] { 
  display: block; 
  position: absolute; 
  top:0; 
  left:0; 
  z-index: 0; 
} 
 
/* For IE 7-8-9 
 
input[type="radio"] { 
  display: inline-block; 
} 
input[type="radio"] + label span.radioButtonGraph { 
  display: none; 
} 
 
*/ 
 
input[type="radio"] + label span.radioButtonGraph { 
  appearance: none; 
 
  z-index: 20; 
  position: absolute; 
  top:-3px; 
  left:0; 
  display: inline-block; 
  width: 24px; 
  height: 24px; 
  border-radius: 50%; 
  cursor: pointer; 
  vertical-align: middle; 
  box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px; 
 
  background: #efefef; 
  background-image: radial-gradient(ellipse at center,  #62c2f3 0%,#62c2f3 40%,#efefef 45%); 
  background-repeat: no-repeat; 
 
  transition: background-position .15s cubic-bezier(.8, 0, 1, 1); 
} 
input[type="radio"]:checked + label span.radioButtonGraph { 
  transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1); 
} 
 
input[type="radio"] + label span.radioButtonGraph { 
  background-position: -24px 0; 
} 
input[type="radio"]:checked + label span.radioButtonGraph { 
  background-position: 0 0; 
} 

.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
overflow: auto;
width: 100%;
height: 100%;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { background: #00d9ff; }
 
</style>