Skip to content

Instantly share code, notes, and snippets.

@Gotomary

Gotomary/index.html

Last active June 5, 2020 15:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Gotomary/641619401f6b2c09fcd103e86d192d3c to your computer and use it in GitHub Desktop.
Save Gotomary/641619401f6b2c09fcd103e86d192d3c to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Virtual Saint Joseph's Chaplet
Raw
index.html
<div style="text-align:left;margin-top:10%">
<center><i>Instructions: Click on the black beads as you pray the Chaplet.</i><br><br></center>
<input name="rate" id="r1" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r1" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r2" value="The Annunciation (say 2 Hail Marys)" hidden="" type="radio">
<label for="r2" class="radio"><span></span><b>The Annunciation</b> (say 2 <a href="#openModal1">Hail Marys</a>)
<div id="openModal1" 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>
<input name="rate" id="r3" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r3" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r4" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r4" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r5" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r5" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r6" value="The Visitation (say 2 Hail Marys)" hidden="" type="radio">
<label for="r6" class="radio"><span></span><b>The Visitation</b> (say 2 <a href="#openModal2">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r7" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r7" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r8" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r8" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r9" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r9" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br> <br>
<p>
<input name="rate" id="r10" value="The Nativity (say 2 Hail Marys)" hidden="" type="radio">
<label for="r10" class="radio"><span></span><b>The Nativity</b> (say 2 <a href="#openModal3">Hail Marys</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>
<input name="rate" id="r11" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r11" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r12" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r12" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r13" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r13" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br> <br>
<p>
<input name="rate" id="r14" value="The Presentation in the Temple (say 2 Hail Marys)" hidden="" type="radio">
<label for="r14" class="radio"><span></span><b>The Presentation in the Temple</b> (say 2 <a href="#openModal4">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r15" value="raised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r15" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r16" value="raised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r16" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r17" value="raised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r17" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r18" value="The Finding of Our Lord in the Temple (say 2 Hail Marys)" hidden="" type="radio">
<label for="r18" class="radio"><span></span><b>The Finding of Our Lord in the Temple</b> (say 2 <a href="#openModal5">Hail Marys</a>)
<div id="openModal5" 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>
<input name="rate" id="r19" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r19" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r20" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r20" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r21" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r21" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br> <br>
<p>
<input name="rate" id="r22" value="The Agony in the Garden (say 2 Hail Marys)" hidden="" type="radio">
<label for="r22" class="radio"><span></span><b>The Agony in the Garden</b> (say 2 <a href="#openModal6">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r23" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r23" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r24" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r24" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r25" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r25" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r26" value="The Scourging (say 2 Hail Marys)" hidden="" type="radio">
<label for="r26" class="radio"><span></span><b>The Scourging</b> (say 2 <a href="#openModal7">Hail Marys</a>)
<div id="openModal7" 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>
<input name="rate" id="r27" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r27" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r28" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r28" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r29" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r29" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r30" value="The Crowning with Thorns (say 2 Hail Marys)" hidden="" type="radio">
<label for="r30" class="radio"><span></span><b>The Crowning with Thorns</b> (say 2 <a href="#openModal8">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r31" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r31" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r32" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r32" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r33" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r33" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r34" value="The Carrying of the Cross (say 2 Hail Marys)" hidden="" type="radio">
<label for="r34" class="radio"><span></span><b>The Carrying of the Cross</b> (say 2 <a href="#openModal9">Hail Marys</a>)
<div id="openModal9" 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>
<input name="rate" id="r35" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r35" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r36" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r36" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r37" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r37" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r38" value="The Crucifixion (say 2 Hail Marys)" hidden="" type="radio">
<label for="r38" class="radio"><span></span><b>The Crucifixion</b> (say 2 <a href="#openModal10">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r39" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r39" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r40" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r40" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r41" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r41" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<br><br>
<p>
<input name="rate" id="r42" value="The Resurrection (say 2 Hail Marys)" hidden="" type="radio">
<label for="r42" class="radio"><span></span><b>The Resurrection</b> (say 2 <a href="#openModal11">Hail Marys</a>)
<div id="openModal11" 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>
<input name="rate" id="r43" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r43" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r44" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r44" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r45" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r45" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label> <br><br>
<p>
<input name="rate" id="r46" value="The Ascension (say 2 Hail Marys)" hidden="" type="radio">
<label for="r46" class="radio"><span></span><b>The Ascension</b> (say 2 <a href="#openModal12">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r47" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r47" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r48" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r48" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r49" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r49" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label> <br><br>
<p>
<input name="rate" id="r50" value="The Descent of the Holy Spirit (say 2 Hail Marys)" hidden="" type="radio">
<label for="r50" class="radio"><span></span><b>The Descent of the Holy Spirit</b> (say 2 <a href="#openModal13">Hail Marys</a>)
<div id="openModal13" 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>
<input name="rate" id="r51" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r51" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r52" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r52" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r53" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r53" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label> <br><br>
<p>
<input name="rate" id="r54" value="The Assumption (say 2 Hail Marys)" hidden="" type="radio">
<label for="r54" class="radio"><span></span><b>The Assumption</b> (say 2 <a href="#openModal14">Hail Marys</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 our death. Amen.</p>
</div>
</div></label>
<p>
<input name="rate" id="r55" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r55" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r56" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r56" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r57" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r57" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label> <br><br>
<p>
<input name="rate" id="r58" value="The Coronation of the Blessed Virgin (say 2 Hail Marys)" hidden="" type="radio">
<label for="r58" class="radio"><span></span><b>The Coronation of the Blessed Virgin</b> (say 2 <a href="#openModal15">Hail Marys</a>)
<div id="openModal15" 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>
<input name="rate" id="r59" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r59" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r60" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r60" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
<p>
<input name="rate" id="r61" value="Praised and blessed be Jesus, Mary and Joseph!" hidden="" type="radio">
<label for="r61" class="radio"><span></span>Praised and blessed be Jesus, Mary and Joseph!</label>
</div><br>
<b>V</b> Pray for us, O holy St. Joseph.:<br>
<b>R</b> That we may be made worthy of the promises of Christ.:<p><p>
<b>Let us pray:</b><br>
O God, Who has predestined St. Joseph from all eternity for the service of Thine Eternal Son and His Blessed Mother, and made him worthy to be the spouse of this Blessed Virgin and the foster father of Thy Son; we beseech Thee, through all the services he has rendered to Jesus and Mary on earth, that Thou wouldst make us worthy of his intercession and grant us to enjoy the happiness of his company in heaven. Through Christ our Lord. Amen.
<p><p>
<!-- Please do not remove the below items-->
Interactive Saint Joseph 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>.
<style>
input[type="radio"] {
display: none;
}
/** %[Object] Radio buttons */
/*------------------------------------*/
@-webkit-keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
@-moz-keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
@-o-keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
@keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
.radio {
color: #798188;
cursor: pointer;
margin-left: .5em;
display: inline-block;
}
.radio,
.radio span:before {
-webkit-transition: .25s ease;
-moz-transition: .25s ease;
-ms-transition: .25s ease;
-o-transition: .25s ease;
transition: .25s ease;
}
.radio span {
width: 1.5em;
height: 1.5em;
margin-right: .5em;
border-radius: 3em;
background: #202325;
vertical-align: top;
display: inline-block;
}
.radio span:before {
content: '';
width: .7em;
height: .7em;
margin: .4em;
border-radius: 3em;
display: inline-block;
background-color: rgba(0,0,0,0);
}
.radio:hover span:before {
background-color: rgba(255,255,255, .9);
}
/*------------------------------------*/
input[type="radio"]:checked + .radio {
color: #0E990E;
}
input[type="radio"]:checked + .radio span:before {
background-color: #9fd86b;
width: .9em;
height: .9em;
margin: .3em;
-webkit-animation: pulse .25s;
-moz-animation: pulse .25s;
-o-animation: pulse .25s;
animation: pulse .25s;
}
.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>
</textarea></center>
<style>
input[type="radio"] {
display: none;
}
/** %[Object] Radio buttons */
/*------------------------------------*/
@-webkit-keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
@-moz-keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
@-o-keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
@keyframes pulse {
0% {
width: .7em;
height: .7em;
margin: .4em;
}
50% {
width: 1.1em;
height: 1.1em;
margin: .2em;
}
100% {
width: .9em;
height: .9em;
margin: .3em;
};
}
.radio {
color: #798188;
cursor: pointer;
margin-left: .5em;
display: inline-block;
}
.radio,
.radio span:before {
-webkit-transition: .25s ease;
-moz-transition: .25s ease;
-ms-transition: .25s ease;
-o-transition: .25s ease;
transition: .25s ease;
}
.radio span {
width: 1.5em;
height: 1.5em;
margin-right: .5em;
border-radius: 3em;
background: #202325;
vertical-align: top;
display: inline-block;
}
.radio span:before {
content: '';
width: .7em;
height: .7em;
margin: .4em;
border-radius: 3em;
display: inline-block;
background-color: rgba(0,0,0,0);
}
.radio:hover span:before {
background-color: rgba(255,255,255, .9);
}
/*------------------------------------*/
input[type="radio"]:checked + .radio {
color: #0E990E;
}
input[type="radio"]:checked + .radio span:before {
background-color: #9fd86b;
width: .9em;
height: .9em;
margin: .3em;
-webkit-animation: pulse .25s;
-moz-animation: pulse .25s;
-o-animation: pulse .25s;
animation: pulse .25s;
}
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment