JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="http://synercom.alteo.fr/js/jquery.nyroModal.custom.min.js"></script>
<link rel="stylesheet" href="http://synercom.alteo.fr/css/screen.css">
<a href="#test" class="nyroModal">DOM Element (hidden div)</a> <div id="test" style="display: none; width: 600px;">   <a href="demoSent.php" class="nyroModal">Open a new modal</a><br />   Test </div>


<!--[if IE 6]>
        <script type="text/javascript" src="http://synercom.alteo.fr/js/jquery.nyroModal-ie6.min.js"></script>
    <![endif]-->

CSS

.hide {display:none;}
            .nyroModalBg { position: fixed; overflow: hidden; top: 0; left: 0; height: 100%; width: 100%; background: #000; opacity: 0.7; z-index: 5; }
            .nmReposition { position: absolute; }
            .nyroModalCloseButton {top: -13px; right: -13px; width: 30px; height: 30px; text-indent: -9999em; background: url(../images/btn_close.png) no-repeat left top; z-index:8; }
            .nyroModalTitle { top: -26px; left: 0; margin: 0; font-size: 1.1em; color: #ddd; }
            .nyroModalCont { position: absolute; border:2px solid #ffffff; background:#FFF url(../images/bgd_result.png) repeat-x left bottom; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; z-index:6;}
                .nyroModalCont iframe { width: 600px; height: 400px; }
                
                .nyroModalCont .argu-cession ul {}
                .argu-cession .argu-title, .argu-cession .argu-ref{float:left; background:#3670B8!important; display:block; height:14px; color:#ffffff; padding:3px 10px; font-weight:bold;}
                .argu-ref{padding:3px 20px 3px 40px;}
                .argu-ref, .argu-title, .argu-tel{margin:0 0 10px 0;}
                .argu-cession .argu-tel{float:right; display:block; height:14px; color:#3670B8; padding:3px 20px; font-weight:bold;}
                .nyroModalCont .argu-cession ul li{clear:both; background:transparent; padding:0 0 0 10px; color:#3670B8; font-weight:bold;}
                .nyroModalCont .argu-cession ul .a-noter {margin:2px 0 0 14px; color:#626262; font-weight:bold;}
                .nyroModalCont .argu-cession ul .a-noter p{color:#6c6c6c; font-weight:normal;}
                .nyroModalCont .argu-cession ul li p{float:none; padding:0; width:auto; color:#6c6c6c; font-weight:normal;}
                
                .nyroModalCont .argu-acquisition ul {}
                .argu-acquisition .argu-title, .argu-acquisition .argu-ref{float:left; background:#DF2B2E; display:block; height:14px;...

JavaScript

$(function() {   $('.nyroModal').nyroModal(); });