Interactive Virtual Rosary

index.html

<div style="text-align:center;margin-top:0%">
<b>Instructions</b><br>
Click on the beads as you say a prayer to give Our Lady a red rose. Click on the Mystery headings to reflect on the mystery. 
<br>Joyful (Mon, Sat), Sorrowful (Tue, Fri), Glorious (Wed, Sun), Luminous (Thu).<br>
<p> <br>
  <input type="checkbox" id="checkbox-1"/><label for="checkbox-1"></label> 
  <a href="#openModal1">Apostles' Creed</a>

  <div id="openModal1" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Apostle's 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>
  <p> 
  <input type="checkbox" id="checkbox-2"><label for="checkbox-2"></label> 
  <a href="#openModal2">Our Father</a>

<div id="openModal2" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Our Father</h2>
    <p>Our Father who art in heaven,<p>
Hallowed be thy name.<p>
Thy kingdom come.<p>
Thy will be done<p>
on earth as it is in heaven.<p>
Give us this day our daily bread,<p>
and forgive us our trespasses,<p>
as we forgive those who trespass against us,<p>
and lead us not into temptation,<p>
but deliver us from evil.<p>
</p>
</div>
</div> 
    <p> 
  <input type="checkbox" id="checkbox-3" /> <label for="checkbox-3"></label> 
  <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 death. Amen.</p>
</div>
</div>
   <p> 
  <input type="checkbox" id="checkbox-4" /> <label for="checkbox-4"></label> 
  Hail Mary
   <p> 
  <input type="checkbox" id="checkbox-5" /> <label for="checkbox-5"></label> 
  Hail Mary
   <p> 
  <input type="checkbox" id="checkbox-6" /> <label for="checkbox-6"></label> 
  <a href="#openModal4">Glory Be</a>

<div id="openModal4" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Glory Be</h2>
    <p>Glory to the Father, and to the Son, and to the Holy Spirit,<p>
As it was in the beginning, and now, and ever shall be, world without end. Amen.</p>
</div>
</div>
</p> 
<br><b><a href="#openModal5">1st Mystery</a></b>

<div id="openModal5" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>1st Mystery</h2>
    <p>Joyful: The Annunciation; <p>Sorrowful: The agony in the garden; <p>Glorious: The resurrection; <p>Luminous: The baptism of Our Lord</p>
</div>
</div>
 <p> 
  <input type="checkbox" id="checkbox-7" /> <label for="checkbox-7"></label> 
  Our Father
  <p> 
  <input type="checkbox" id="checkbox-8" /> <label for="checkbox-8"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-9" /> <label for="checkbox-9"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-10" /> <label for="checkbox-10"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-11" /> <label for="checkbox-11"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-12" /> <label for="checkbox-12"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-13" /> <label for="checkbox-13"></label> 
  Hail Mary
    <p> 
  <input type="checkbox" id="checkbox-14" /> <label for="checkbox-14"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-15" /> <label for="checkbox-15"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-16" /> <label for="checkbox-16"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-17" /> <label for="checkbox-17"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-18" /> <label for="checkbox-18"></label> 
 Glory Be
 <p> 
  <input type="checkbox" id="checkbox-19" /> <label for="checkbox-19"></label> 
 <a href="#openModal6">Fatima Prayer</a>

  <div id="openModal6" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Fatima Prayer</h2>
    
    <p>O my Jesus, forgive us our sins, save us from the fires of hell, lead all souls to Heaven, especially those most in need of Thy mercy. Amen.</p>
</div>
</div>
</p> <br>

<b><a href="#openModal7">2nd Mystery</a></b>

  <div id="openModal7" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>2nd Mystery</h2>
    
    <p>Joyful: The Visition of Our Lady to Saint Elizabeth;<p> Sorrowful: The flagellation; <p>Glorious: The Ascension of Our Lord into Heaven; <p>Luminous: The wedding at Cana</p>
</div>
</div>



<p> 
  <input type="checkbox" id="checkbox-20" /> <label for="checkbox-20"></label> 
  Our Father
  <p> 
  <input type="checkbox" id="checkbox-21" /> <label for="checkbox-21"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-22" /> <label for="checkbox-22"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-23" /> <label for="checkbox-23"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-24" /> <label for="checkbox-24"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-25" /> <label for="checkbox-25"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-26" /> <label for="checkbox-26"></label> 
  Hail Mary
    <p> 
  <input type="checkbox" id="checkbox-27" /> <label for="checkbox-27"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-28" /> <label for="checkbox-28"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-29" /> <label for="checkbox-29"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-30" /> <label for="checkbox-30"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-34" /> <label for="checkbox-34"></label> 
 Glory Be
 <p> 
  <input type="checkbox" id="checkbox-35" /> <label for="checkbox-35"></label> 
 Fatima Prayer
 </p></br><br>
 
<b> <a href="#openModal8">3rd Mystery</a></b>

  <div id="openModal8" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>3rd Mystery</h2>
    
    <p>Joyful: The birth of Our Lord; <p>Sorrowful: The crowning of thorns; <p>Glorious: The descent of the Holy Spirit;<p> Luminous: Sermon on the Mount</p>
</div>
</div>
 <p> 
  <input type="checkbox" id="checkbox-36" /> <label for="checkbox-36"></label> 
  Our Father
  <p> 
  <input type="checkbox" id="checkbox-37" /> <label for="checkbox-37"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-38" /> <label for="checkbox-38"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-39" /> <label for="checkbox-39"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-40" /> <label for="checkbox-40"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-41" /> <label for="checkbox-41"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-42" /> <label for="checkbox-42"></label> 
  Hail Mary
    <p> 
  <input type="checkbox" id="checkbox-43" /> <label for="checkbox-43"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-44" /> <label for="checkbox-44"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-45" /> <label for="checkbox-45"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-46" /> <label for="checkbox-46"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-47" /> <label for="checkbox-47"></label> 
 Glory Be
 <p> 
  <input type="checkbox" id="checkbox-48" /> <label for="checkbox-48"></label> 
 Fatima Prayer
 </p></br><br>
 
 <b><a href="#openModal9">4th Mystery</a></b>

  <div id="openModal9" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>4th Mystery</h2>
    
    <p>Joyful: The presentation of Our Lord at the temple;<p> Sorrowful: The carrying of the Cross; <p>Glorious: The Assumption of Our Lady; <p>Luminous: The Transfiguration</p>
</div>
</div>
 <p> 
  <input type="checkbox" id="checkbox-49" /> <label for="checkbox-49"></label> 
  Our Father
  <p> 
  <input type="checkbox" id="checkbox-50" /> <label for="checkbox-50"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-51" /> <label for="checkbox-51"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-52" /> <label for="checkbox-52"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-53" /> <label for="checkbox-53"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-54" /> <label for="checkbox-54"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-55" /> <label for="checkbox-55"></label> 
  Hail Mary
    <p> 
  <input type="checkbox" id="checkbox-56" /> <label for="checkbox-56"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-57" /> <label for="checkbox-57"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-58" /> <label for="checkbox-58"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-59" /> <label for="checkbox-59"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-60" /> <label for="checkbox-60"></label> 
 Glory Be
 <p> 
  <input type="checkbox" id="checkbox-61" /> <label for="checkbox-61"></label> 
 Fatima Prayer
 </p></br><br>
 
 <b><a href="#openModal10">5th Mystery</a></b>

  <div id="openModal10" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>5th Mystery</h2>
    
    <p>Joyful: The finding of Our Lord at the Temple; <p>Sorrowful: The Crucifixion; <p>Glorious: The crowning of Our Lady as the Queen of Heaven; <p>Luminous: The Last Supper</p>
</div>
</div>
 <p> 
  <input type="checkbox" id="checkbox-62" /> <label for="checkbox-62"></label> 
  Our Father
  <p> 
  <input type="checkbox" id="checkbox-63" /> <label for="checkbox-63"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-64" /> <label for="checkbox-64"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-65" /> <label for="checkbox-65"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-66" /> <label for="checkbox-66"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-67" /> <label for="checkbox-67"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-68" /> <label for="checkbox-68"></label> 
  Hail Mary
    <p> 
  <input type="checkbox" id="checkbox-69" /> <label for="checkbox-69"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-70" /> <label for="checkbox-70"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-71" /> <label for="checkbox-71"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-72" /> <label for="checkbox-72"></label> 
  Hail Mary
  <p> 
  <input type="checkbox" id="checkbox-73" /> <label for="checkbox-73"></label> 
 Glory Be
 <p> 
  <input type="checkbox" id="checkbox-74" /> <label for="checkbox-74"></label> 
 Fatima Prayer
</p> </br><br>
 <p> 
  <input type="checkbox" id="checkbox-75" /> <label for="checkbox-75"></label> 
 <a href="#openModal11">Hail Holy Queen</a>

  <div id="openModal11" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Hail Holy Queen</h2>
    
    <p>Hail, holy Queen, Mother of Mercy,<p>
Our life, our sweetness and our hope.<p>
To you do we cry,<p>
Poor banished children of Eve;<p>
To you do we send up our sighs,<p>
Mourning and weeping in this valley of tears.<p>
Turn then, most gracious advocate,<p>
Your eyes of mercy toward us;<p>
And after this our exile,<p>
Show us the blessed fruit of your womb, Jesus.<p>
O clement, O loving,<p>
O sweet Virgin Mary.<p>
℣ Pray for us, O holy Mother of God,<p>
℟ that we may be made worthy of the promises of Christ.
</p>
</div>
</div>
 <p> 
  <input type="checkbox" id="checkbox-76" /> <label for="checkbox-76"></label> 
 <a href="#openModal12">Concluding Prayer</a>

  <div id="openModal12" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Concluding Prayer</h2>
    
    <p>O God, Whose only-begotten Son, by His life, death and resurrection, hath purchased for us the rewards of eternal salvation; grant, we beseech Thee, that as we have meditated on these mysteries of the Most Holy Rosary of the Blessed Virgin Mary, we may imitate what they contain and obtain what they promise, through the same Christ our Lord. Amen.</p>
</div>
</div>

<!-- Please do not remove the below items-->
Interactive Virtual Rosary 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>.



<style>
.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; }
p {
  position: relative;
}

p > input[type="checkbox"] {
  cursor: pointer;
  position: absolute;
  left: 3px;
  top: 0;
  z-index: 2;
  width: 26px;
  height: 26px;
  opacity: 0;
  vertical-align: middle;
}

p > input[type="checkbox"] +label {
  vertical-align: middle;
  border: 2px solid #ccc;
  background-color: #fff;
  height: 26px;
  width: 26px;
  margin-right: 16px;
  display: inline-block;
  z-index: 1;
  position: relative;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

p > input[type="checkbox"]:checked+label {
  background: -webkit-linear-gradient(top,#EE0C0C,#9B0B0B);
  background: -ms-linear-gradient(top,#EE0C0C,#9B0B0B);
  background: -moz-linear-gradient(top,#EE0C0C,#9B0B0B);
  box-shadow: 0 2px 7px rgba(0,0,0, 0.6);
  border: 2px solid #fff;
}

p > input[type="checkbox"]:checked+label:after {
  content: '@';
  text-indent: 0;
  font-size: 15px;
  color: #fff;
  position: absolute;
  top: 4px;
  left: 7px;
  width: 13px;
  text-shadow: 0 -1px 0 rgba(0,0,0, 0.7);
} 
</style>