Interactive Virtual Saint Michael's Chaplet

index.html

<div style="text-align: center">

<h2>Introductory prayer</h2>
<p>
O God, come to my assistance. O Lord, make haste to help me. <p>Glory to the Father, and to the Son, and to the Holy Spirit,
As it was in the beginning, and now, and ever shall be, world without end. Amen.<p></p>

<p><br>
<b>First Salutation</b><p>
1. By the intercession of St. Michael and the celestial Choir of Seraphim may the Lord make us worthy to burn with the fire of perfect charity.
Amen.

</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal2">Hail Mary</a>
        <div id="openModal2" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Second Salutation</b><p>
 2. By the intercession of St. Michael and the celestial Choir of Cherubim may the Lord grant us the grace to leave the ways of sin and run in the paths of Christian perfection.
Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal3">Our Father</a>

  <div id="openModal3" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal4">Hail Mary</a>
        <div id="openModal4" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Third Salutation</b><p>
 3. By the intercession of St. Michael and the celestial Choir of Thrones may the Lord infuse into our hearts a true and sincere spirit of humility.
Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal5">Our Father</a>

  <div id="openModal5" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal6">Hail Mary</a>
        <div id="openModal6" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Fourth Salutation</b><p>
 4. By the intercession of St. Michael and the celestial Choir of Dominations may the Lord give us grace to govern our senses and overcome any unruly passions.
Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal7">Our Father</a>

  <div id="openModal7" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal8">Hail Mary</a>
        <div id="openModal8" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>

<b>Fifth Salutation</b><p>
 5. By the intercession of St. Michael and the celestial Choir of Virtues may the Lord preserve us from evil and falling into temptation. Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal9">Our Father</a>

  <div id="openModal9" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal10">Hail Mary</a>
        <div id="openModal10" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Sixth Salutation</b><p>
 6. By the intercession of St. Michael and the celestial Choir of Powers may the Lord protect our souls against the snares and temptations of the devil.
Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal11">Our Father</a>

  <div id="openModal11" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal12">Hail Mary</a>
        <div id="openModal12" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Seventh Salutation</b><p>
 7. By the intercession of St. Michael and the celestial Choir of Principalities may God fill our souls with a true spirit of obedience. Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal13">Our Father</a>

  <div id="openModal13" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal14">Hail Mary</a>
        <div id="openModal14" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Eight Salutation</b><p>
 8. By the intercession of St. Michael and the celestial Choir of Archangels may the Lord give us perseverance in faith and in all good works in order that we may attain the glory of Heaven.
Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal15">Our Father</a>

  <div id="openModal15" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal16">Hail Mary</a>
        <div id="openModal16" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<b>Ninth Salutation</b><p>
 9. By the intercession of St. Michael and the celestial Choir of Angels may the Lord grant us to be protected by them in this mortal life and conducted in the life to come to Heaven.
Amen.
</p>
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
         <a href="#openModal17">Our Father</a>

  <div id="openModal17" 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>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        <a href="#openModal18">Hail Mary</a>
        <div id="openModal18" 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> </label>
<p>
</p>
   
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
        Hail Mary</label>

    <p> </p>
    
    <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
      Hail Mary</label>
<p></p>
<i>Say one Our Father in honour of each of the following leading Angels:</i><p>
<label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
       St. Michael</label><p>
       <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
       St. Gabriel</label><p>
       <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
       St. Raphael</label><p>
        <label class="button">
        <input type="radio" name="button" />
        <span class="outer"><span class="inner"></span></span>
       Our Guardian Angel</label><p>
       
       <br>
       <b>Concluding Prayers</b><p>
       O glorious prince St. Michael, chief and commander of the heavenly hosts, guardian of souls, vanquisher of rebel spirits, servant in the house of the Divine King and our admirable conductor, you who shine with excellence and superhuman virtue deliver us from all evil, who turn to you with confidence and enable us by your gracious protection to serve God more and more faithfully every day.
<p>
Pray for us, O glorious St. Michael, Prince of the Church of Jesus Christ, that we may be made worthy of His promises.
<p>
Almighty and Everlasting God, Who, by a prodigy of goodness and a merciful desire for the salvation of all men, has appointed the most glorious Archangel St. Michael Prince of Your Church, make us worthy, we ask You, to be delivered from all our enemies, that none of them may harass us at the hour of death, but that we may be conducted by him into Your Presence.This we ask through the merits of
Jesus Christ Our Lord.
<p>
Amen.<br><br>

<!-- Please do not remove the below items-->
Interactive Virtual Saint Michael Chaplet originally published by <a href="http://www.gotomary.com">Go to Mary</a>. To see more free code and for other Catholic information please see <a href="http://www.gotomary.com">Go to Mary</a>.
<br>



<style>


.button {
    background: #cfe7fa;
    background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
    background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    border: 1px solid #6393c1;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -moz-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
    -webkit-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .5);
    cursor: pointer;
    display: inline-block;
    font: 15px Arial, Verdana, Geneva, sans-serif;
    line-height: 41px;
    padding-right: 20px;
}

.button:hover .inner {
    opacity: .5;
}

.button input {
    display: none;
}

.button input:checked + .outer .inner {
    opacity: 1;
}

.button .outer {
    background: #2989d8;
    background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
    background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    border: 1px solid black;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    display: block;
    float: left;
    height: 20px;
    margin: 10px;
    width: 20px;
}

.button .inner {
    background: #e4f5fc;
    background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
    background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    display: block;
    height: 14px;
    margin: 3px;
    opacity: 0;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    width: 14px;
}

.modalDialog {
 color: #000;
        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>
</div>