JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css"/>
<script src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<a href="#sendMessa" rel="mess" id="sendMessage">Envoyer un message</a>
<div id="sendMessa" style="display:none">
<b>Votre message pour <?php echo $user->getUsername() ?> :</b>
<br/><br/>
<textarea id="gfdgfdgdfgf" style="width:350px" rows="8" class="daTextbox"></textarea>
</div>
JavaScript
$(function() {
$("a[rel^='mess']").prettyPhoto({
theme: "light_rounded",
modal: false,
social_tools: "",
default_width: 370,
default_height: 150,
autoplay: false,
slideshow: false,
allow_resize: false,
/* Resize the photos bigger than viewport. true/false */
markup: '<div class="pp_pic_holder"> \
<div class="ppt"> </div> \
<div class="pp_top"> \
<div class="pp_left"></div> \
<div class="pp_middle"></div> \
<div class="pp_right"></div> \
</div> \
<div class="pp_content_container"> \
<div class="pp_left"> \
<div class="pp_right"> \
<div class="pp_content"> \
<div class="pp_loaderIcon"></div> \
<div class="pp_fade"> \
<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
<div class="pp_hoverContainer"> \
<a class="pp_next" href="#">next</a> \
<a class="pp_previous" href="#">previous</a> \
...