JSFiddle - React, Tailwind, and code Playground
by mecano
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="div_mod">
<div class="row-edit" data-type="image"><img src="http://zupimages.net/up/17/32/bgot.jpg" width="100" height="100"></div>
<div class="size-paragraphe">
<h1 class="row-edit" data-type="title">Lorem ipsum - titre produit</h1>
<p class="row-edit" data-type="text">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem. Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem. Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.</p>
<p class="row-edit" data-type="price"><strong>Prix : 300€</strong></p>
<p class="row-edit" data-type="link"><a href="monlien.com">J'en profite</a></p>
</div>
</div>
<!-- #modale -->
<div class="edit" id="edit-image">
<div class="edit-box" style="height:230px;">
<div class="edit-box-title">Edit Image</div>
<div class="edit-box-content">
<div class="edit-box-content-text">URL:<span>(Adresse complète comprenant http://)</span></div>
<div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input image" /></div>
</div>
<div class="edit-box-buttons">
<div class="edit-box-buttons-save">Save</div>
<div class="edit-box-buttons-cancel">Cancel</div>
</div>
</div>
</div>
<div class="edit" id="edit-link">
<div class="edit-box" style="height:310px;">
<div class="edit-box-title">Edit Link</div>
<div class="edit-box-content">
<div class="edit-box-content-text">Title</div>
<div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input title"/></div>
<div...CSS
.div_mod {width:500px;border:1px dashed #000;margin:10px auto;}
.size-paragraphe {font-size:12px;}
.row-edit {position:relative;}
.row-edit-hover {height:100%;width:100%;background-color:rgba(63,141,191,0.8);position:absolute;left:0px;top:0px;cursor:default;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
.row-edit-hover i {position:absolute;height:30px;width:30px;line-height:30px;left:50%;top:50%;text-align:center;margin-top:-15px;margin-left: -15px;color:rgba(255,255,255,1);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;font-size:16px;}
.row-edit-hover i:hover {background-color:rgba(0,0,0,0.5);cursor:pointer;}
.edit {height:100%;width:100%;position:fixed;z-index:2;display:none;background-image:url(http://zupimages.net/up/17/36/fv5w.png);background-repeat:repeat;}
.edit-box {width:450px;background-color:rgba(255,255,255,1);margin-right:auto;margin-left:auto;margin-top:0%;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.5);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.5);padding:25px;height:300px;
display:none;}
.edit-box-title {float:left;width:100%;font-size:25px;color:rgba(153,153,153,1);}
.edit-box-content-text span {font-size:13px;color:rgba(153,153,153,1);}
.edit-box-content {float:left;width:100%;margin-top:10px;}
.edit-box-content-text {float:left;width:100%;font-size:16px;color:rgba(102,102,102,1);font-weight:600;margin-top:15px;}
.edit-box-content-field {float:left;width:100%;margin-top:15px;}
.edit-box-content-field-input {float:left;height:33px;width:380px;border:1px solid rgba(204,204,204,1);outline:none;font-family:inherit;padding-right:10px;padding-left:10px;font-size:15px;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all...JavaScript
$(function(){
console.clear();
(function hover_edit(){
var big_parent;
$(".row-edit").hover(
function() {
$(this).append('<div class="row-edit-hover"><i class="fa fa-pencil" style="line-height:30px;"></i></div>');
}, function() {
$(this).children(".row-edit-hover").remove();
}
);
$(".row-edit-hover").click(function(e) {e.preventDefault()});
$("body").on('click', ".row-edit-hover i", function(e) {
e.preventDefault();
big_parent = $(this).parent().parent();
//edit image
if(big_parent.attr("data-type")=='image'){
$("#edit-image .image").val(big_parent.children('img').attr("src"));
$("#edit-image").fadeIn(500);
$("#edit-image .edit-box").slideDown(500);
}
//edit link
if(big_parent.attr("data-type")=='link'){
$("#edit-link .title").val(big_parent.text());
$("#edit-link .url").val(big_parent.children('a').attr("href"));
$("#edit-link").fadeIn(500);
$("#edit-link .edit-box").slideDown(500);
}
//edit title
if(big_parent.attr("data-type")=='title'){
$("#edit-title .title").val(big_parent.text());
$("#edit-title").fadeIn(500);
$("#edit-title .edit-box").slideDown(500);
}
//edit price
if(big_parent.attr("data-type")=='price'){
$("#edit-price .price").val(big_parent.text());
$("#edit-price").fadeIn(500);
$("#edit-price .edit-box").slideDown(500);
}
//edit text
if(big_parent.attr("data-type")=='text'){
$("#edit-text .text").val(big_parent.text());
$("#edit-text").fadeIn(500);
$("#edit-text .edit-box").slideDown(500);
}
});
$(".edit-box-buttons-save").click(function() {
var toSave = {};
$(this).parents('.edit').fadeOut(500).children().slideUp(500);
//console.info(toSave);
toSave = {
'id' :...