Name Surname
Group - age - job - favorite pokemon
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Prénom Nom
Nature de la relation
Aliquam in sagittis nulla. Curabitur euismod diam eget risus venenatis, sed dictum lectus bibendum. Nunc nunc nisi, hendrerit eget nisi id, rhoncus rutrum velit. Nunc vel mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla quis nisi eget imperdiet.
Prénom Nom
Nature de la relation
Popup 2.
Prénom Nom
Nature de la relation
Popup 3.
ATTENTION : Pensez à changer les nom des labels pour différencier chaque pop-up !
- Code:
<label class="awf-shipper-item" for=MODIFIER" name="modal-ship" >
<input class="modal-trigger" id="MODIFIER" type="radio" name="modal-ship" />
Le "MODIFIER" ici doit être identique pour chaque modal.
Je vous conseille de suffixer avec des chiffres pour vous faciliter les choses.
- Code:
<link href="https://fonts.googleapis.com/css?family=Arimo|Raleway:900,400" rel="stylesheet"><style>.shipper-wrap *{box-sizing: border-box;}.shipper-wrap {width: 450px;margin: auto;font-family: 'Arimo', sans-serif;}.shipper-wrap *{box-sizing: border-box;}.awf-shipper {width: 100%;min-height: 155px;position: relative;padding: 20px;box-sizing: border-box;background-color: #f3f3f3;border-bottom: 6px solid #575757;}.awf-shipper + div {text-align: center;}.awf-shipper1-relations {width: 450px;margin: auto;text-align: center;}.awf-shipper img {padding: 5px;border: 1px solid #ccc;float: left;margin-right: 15px;border-radius: 50%;}.awf-shipper h2, .modal-pop h2 {margin: 15px 0 0 0;display: inline-block;font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 20px;text-transform: lowercase;letter-spacing: -1px;color: #575757;border: 0;}.modal-pop h2 {margin: 15px 0 0 0;display: block;}.shipper-wrap h3 {margin: 0 0 10px 0;display: inline-block;font-family: 'Raleway', sans-serif;font-weight: normal;font-size: 10px;text-transform: uppercase;color: #9b9b9b;}.awf-shipper-desc {padding: 0 10px;box-sizing: border-box;height: 80px;overflow: auto;font-size: 10px;text-align: justify;line-height: 12px;}.awf-shipper-item {width: 110px;border-radius: 50%;display: inline-block;text-decoration: none;margin: 15px;vertical-align: top;cursor: pointer;}.awf-shipper-item img {border-radius: 50%;padding: 5px;border: 1px solid #ccc;}.awf-shipper-item h4 {margin: 10px 0 0 0;font-family: 'Raleway', sans-serif;font-weight: 600;font-size: 10px;text-transform: uppercase;color: #575757;text-align: center;}#essai {transform: none;}.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0, 0, 0, .9);transition: opacity .25s ease;z-index: 999;}.modal-bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}.shipper-wrap input {display: none;}.modal-trigger:checked + .modal {opacity: 1;visibility: visible;}.modal-trigger:checked + .modal .modal-pop {top: 30%;}.modal-pop {transition: top .25s ease;position: relative;top: -20%;right: 0;bottom: 0;left: 0;width: 450px;margin: auto;overflow: auto;background: #fff;padding: 1em 2em;height: 250px;font-size: 11px;text-align: justify;}.modal-bg:after,.modal-bg:before {content: '';position: absolute;width: 2px;height: 1.5em;background: #ccc;display: block;transform: rotate(45deg);left: calc(50% + 215px);margin: -3px 0 0 -1px;top: calc(30% + 10px);transition: all 0.3s, opacity 0.3s 0.3s;z-index: 10;opacity: 0;}.modal-trigger:checked + .modal .modal-bg:after,.modal-trigger:checked + .modal .modal-bg:before {opacity: 1;}.modal-bg:hover:after,.modal-bg:hover:before {background: #aaa;}.modal-bg:before {transform: rotate(-45deg);}.awf-shipper-desc::-webkit-scrollbar,.awf-shipper-content::-webkit-scrollbar {width: 2px;}.awf-shipper-desc::-webkit-scrollbar-track,.awf-shipper-content::-webkit-scrollbar-track {background-color: #ccc;}.awf-shipper-desc::-webkit-scrollbar-thumb,.awf-shipper-content::-webkit-scrollbar-thumb {background-color: #48534F;}.awf-credit {position: absolute;left: 0;top: -15px;}.awf-credit a {color: #ccc !important;text-transform: uppercase;font-size: 8px;letter-spacing: 1px;text-decoration: none!important;}</style>
<div class="shipper-wrap"><div class="awf-shipper"><div class="awf-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div><!--
--><img src="http://placehold.it/100x100" alt=""><!--
--><h2>Name <b>Surname</b></h2><!--
--><h3>Group - age - job - favorite pokemon</h3><!--
--><div class="awf-shipper-desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><div><!--
****FIN DU BLOC D'INTRO ****
*** Pensez à changer les id pour chaque modal ! (ici: modal-1) *** -->
<label class="awf-shipper-item" for="modal-1" name="modal-ship" ><!--
--><img src="http://placehold.it/100x100" alt=""><h4>Name surname</h4><!--
--></label><input class="modal-trigger" id="modal-1" type="radio" name="modal-ship" /><div class="modal"><label class="modal-bg" for="modal-close"></label><div class="modal-pop"><!--
--><h2><b>Prénom</b> Nom</h2><h3>Nature de la relation</h3><p>Aliquam in sagittis nulla. Curabitur euismod diam eget risus venenatis, sed dictum lectus bibendum. Nunc nunc nisi, hendrerit eget nisi id, rhoncus rutrum velit. Nunc vel mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla quis nisi eget imperdiet.</p></div></div><!--
--><label class="awf-shipper-item" for="modal-2" name="modal-ship"><!--
--><img src="http://placehold.it/100x100" alt=""><h4>Name surname</h4><!--
--></label><input class="modal-trigger" id="modal-2" type="radio" name="modal-ship" /><div class="modal"><label class="modal-bg" for="modal-close"></label><div class="modal-pop"><!--
--><h2><b>Prénom</b> Nom</h2><h3>Nature de la relation</h3><p>Popup 2.</p></div></div><!--
--><label class="awf-shipper-item" for="modal-3" name="modal-ship"><!--
--><img src="http://placehold.it/100x100" alt=""><h4>Name surname</h4><!--
--></label><input class="modal-trigger" id="modal-3" type="radio" name="modal-ship" /><div class="modal"><label class="modal-bg" for="modal-close"></label><div class="modal-pop"><!--
--><h2><b>Prénom</b> Nom</h2><h3>Nature de la relation</h3><p>Popup 3.</p></div></div></div><input id="modal-close" type="radio" name="modal-ship" /></div>
|
|
|