Clone div и alter style by onclick

Question

В моем HTML у меня есть 4 коробки, которые я хочу увеличить по размеру и появиться в середине веб-сайта по onclick. Но это не работает с этой версией клонирования.

function changeSize(id, weight, height){ 
 
\t //$("." + id).clone().appendTo("new" + id); 
 
\t var elem = document.getElementById(id); 
 
    clone = elem.cloneNode(true); // true means clone all childNodes and all event handlers 
 
\t clone.id = "newid" +id; 
 
\t document.body.appendChild(clone); 
 
\t  
 
    
 
    if(elem.getAttribute('style')){ 
 
     elem.removeAttribute('style'); 
 
    } else { 
 
     elem.style.width = weight + 'px'; 
 
     elem.style.height = height + 'px'; 
 
     elem.style.fontSize = '30px'; 
 
     
 
     elem.style.position = 'absolute'; 
 
     elem.style.left= '40%'; 
 
    } 
 
} 
 

 
var elems = document.getElementsByClassName('kaesten'); 
 
for(var i = 0; i < elems.length; i++){ 
 
    elems[i].onclick = function(){ 
 
     changeSize(this.id, 600, 600); 
 
    } 
 
}

.kaesten{ 
 
\t width:240px; 
 
\t height:300px; 
 
\t background-color:darkgrey; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t text-shadow:0px 0px 3px #000; 
 
\t border: 5px solid #F0F8ff; 
 
\t vertical-align:top; 
 
\t text-shadow: 3px 3px 4px #777; 
 
\t float:left; 
 
\t margin-left:30px; 
 
}

<div id="box1" class="kaesten">test1</div> 
 
<div id="box2" class="kaesten">test2</div> 
 
<div id="box3" class="kaesten">test3</div> 
 
<div id="box4" class="kaesten">test4</div>

Вопрос: Как я могу клонировать окно, OnClick и показать его в середине сайта? Как удалить его с помощью onclick?

Answer 1

Вы можете изменить CSS с JQuery CSS() Метод: источник: http://api.jquery.com/css/

Чтобы установить заданный CSS свойство, используйте следующий синтаксис:

CSS ("ИмениСвойства", "значение");

$(document).ready(function() { 
 
    $('.kaesten').click(function() { 
 
    $('.kaesten').removeAttr('style'); 
 
    
 
    var id = $(this).attr('id'); 
 
    $('#' + id).css({ 
 
     "width": "30em", 
 
     "height": "18em", 
 
     "top": "50%", 
 
     "left": "50%", 
 
     "position": "fixed", 
 
     "margin-top": "-9em", 
 
     "margin-left": "-15em", 
 
     "background-color": "blue" 
 

 
    }); 
 

 
    }); 
 
});

.kaesten { 
 
    cursor: pointer; 
 
    width: 240px; 
 
    height: 300px; 
 
    background-color: darkgrey; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    text-shadow: 0px 0px 3px #000; 
 
    border: 5px solid #F0F8ff; 
 
    vertical-align: top; 
 
    text-shadow: 3px 3px 4px #777; 
 
    float: left; 
 
    margin-left: 30px; 
 
    color: #fff; 
 
    font-family: 'helvetica'; 
 
} 
 
.container { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="box1" class="kaesten">test1</div> 
 
    <div id="box2" class="kaesten">test2</div> 
 
    <div id="box3" class="kaesten">test3</div> 
 
    <div id="box4" class="kaesten">test4</div> 
 
</div>

Answer 2

Если вам просто нужно принести DIV в средней и щелкнув по нему должен вернуться в исходное положение .Try этого кода не требуется JQuery.

function changeSize(id, weight, height){ 
 
\t var elem = document.getElementById(id); \t 
 
\t if(elem.className == 'absoluteclass'){ 
 
\t elem.setAttribute('class','kaesten'); 
 
\t }else{ \t   
 
\t var currentAbsoluteElem = document.getElementsByClassName('absoluteclass'); 
 
\t if(currentAbsoluteElem.length > 0){ 
 
\t \t console.log(currentAbsoluteElem[0]) 
 
\t \t currentAbsoluteElem[0].setAttribute('class','kaesten'); 
 
\t } 
 
\t var elem = document.getElementById(id); 
 
\t elem.setAttribute('class','absoluteclass'); 
 
\t /* for making the height , width dynamic you can change it from here 
 
      elem.style.width = weight + 'px'; 
 
      elem.style.height = height + 'px'; 
 
      elem.style.left= '40%'; 
 
\t */ 
 
\t } 
 
} 
 

 
var elems = document.getElementsByClassName('kaesten'); 
 
for(var i = 0; i < elems.length; i++){ 
 
    elems[i].onclick = function(){ 
 
     changeSize(this.id, 600, 600); 
 
    } 
 
}

.kaesten{ 
 
\t width:240px; 
 
\t height:300px; 
 
\t background-color:darkgrey; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t text-shadow:0px 0px 3px #000; 
 
\t border: 5px solid #F0F8ff; 
 
\t vertical-align:top; 
 
\t text-shadow: 3px 3px 4px #777; 
 
\t float:left; 
 
\t margin-left:30px; 
 
} 
 
.absoluteclass{ 
 
    position:absolute; 
 
    background-color:darkgrey; 
 
    width:600px; 
 
    height:600px; 
 
    left:calc(50% - 300px); 
 
    
 
}

<div id="box1" class="kaesten">test1</div> 
 
<div id="box2" class="kaesten">test2</div> 
 
<div id="box3" class="kaesten">test3</div> 
 
<div id="box4" class="kaesten">test4</div>

Нет необходимости клонировать DIV, если еще нужно клонировать DIV мы, возможно, потребуется изменить код accordingly.You может проверить JSFIDDLE here

Answer 3

Обновленный код: Надеюсь, что это то, что вы искали :)

function changeSize(id, weight, height){ 
 
    var elem = document.getElementById(id); 
 
\t var currentAbsoluteElem = document.getElementById('dummy'); 
 
    var text = elem.innerHTML; 
 
    currentAbsoluteElem.innerHTML = text; 
 
\t currentAbsoluteElem.style="display:block"; 
 
    /*Extra styling neeed to be done here*/ 
 
     
 
\t } 
 

 
var elems = document.getElementsByClassName('kaesten'); 
 
for(var i = 0; i < elems.length; i++){ 
 
    elems[i].onclick = function(){ 
 
     changeSize(this.id, 600, 600); 
 
    } 
 
} 
 

 
var absoluteCl = document.getElementsByClassName('absoluteclass'); 
 
absoluteCl[0].onclick = function(){ 
 
     console.log(document.getElementsByClassName('absoluteclass')) 
 
     document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none'); 
 
}

.kaesten{ 
 
\t width:240px; 
 
\t height:300px; 
 
\t background-color:darkgrey; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t text-shadow:0px 0px 3px #000; 
 
\t border: 5px solid #F0F8ff; 
 
\t vertical-align:top; 
 
\t text-shadow: 3px 3px 4px #777; 
 
\t float:left; 
 
\t margin-left:30px; 
 
} 
 
.absoluteclass{ 
 
    position:absolute; 
 
    background-color:darkgrey; 
 
    width:600px; 
 
    height:600px; 
 
    left:calc(50% - 300px); 
 
    display:none; 
 
}

<div id="box1" class="kaesten">test1</div> 
 
<div id="box2" class="kaesten">test2</div> 
 
<div id="box3" class="kaesten">test3</div> 
 
<div id="box4" class="kaesten">test4</div> 
 
<div id="dummy" class="absoluteclass"></div>