CSS-Übergang JS-Funktion funktioniert nicht

Question

1) Ich möchte die CSS-Eigenschaften eines div ändern, so dass es wie ein modales herausspringt, wenn geklickt wird. Diese CSS-Code ändert die Größe und Position des div auf das, was ich brauche:

#slot1{   
     position: absolute; 
     top: 10px; 
     left: 20%; 
     height: 600px; 
     width: 60%; 
     margin: auto; 
} 

2) Für das ich eine JS-Funktion gemacht, die mir die CSS der Elemente auf die oben ändern lassen:

function boxPop(id, cssValue, cssValue, cssValue, cssValue, cssValue) 
    { 
     document.getElementById(id).style.position = cssValue; 
     document.getElementById(id).style.top = cssValue; 
     document.getElementById(id).style.left = cssValue; 
     document.getElementById(id).style.height = cssValue; 
     document.getElementById(id).style.width = cssValue; 
     document.getElementById(id).style.margin = cssValue; 
    } 

3) ich habe diese mit den gewünschten Parametern zu dem HTML-Element:

<div class="slot_content" id="slot1" onclick="boxPop('slot1', 'absolute', 
'10px', '20%', '600px', '60%', 'auto')"> 

</div> 

das Ergebnis all dessen ist, dass es ändern Größe ist und die Position, aber nicht so, wie es tut, wenn ich fügen sie einfach die gleichen Werte in das CSS (was macht was ich will). Weiß jemand, warum die CSS-Werte von dieser Funktion nicht korrekt zugewiesen werden?

Answer 1

Versuchen Sie, Ihre Funktion zu ändern, so dass Sie die Funktionsparameter Variable immer und immer wieder nicht verwenden (Sie CSSValue wiederholt verwenden):

function boxPop(id, positionValue, topValue, leftValue, heightValue, widthValue, marginValue) 
    { 
     document.getElementById(id).style.position = positionValue; 
     document.getElementById(id).style.top = topValue; 
     document.getElementById(id).style.left = leftValue; 
     document.getElementById(id).style.height = heightValue; 
     document.getElementById(id).style.width = widthValue; 
     document.getElementById(id).style.margin = marginValue; 
    } 

Man könnte denken, auch an eine JS-Bibliothek über die Migration wie JQuery, in dem Sie das CSS für ein DOM-Objekt einfacher festlegen können.

Answer 2

Ihr Fehler ist, dass Ihre Funktion 5 Werte in die gleiche Variable akzeptiert:

function boxPop(id, cssValue, cssValue, cssValue, cssValue, cssValue) 

So Ihre CSSValue wird immer gleich 'auto'.

schlägt auch Sie Ihr Pop-up in einer separaten CSS-Klasse zu beschreiben, dann in JS-Funktion ändern Sie einfach die classname:

.pop-up {your pop-up css here} 

function boxPop(element) {element.className = 'pop-up'} 

<div onclick="boxPop(this)"></div> 

Answer 3

Hier sind zwei Möglichkeiten, es zu tun ... Ich habe einen roten Hintergrund einfach, damit ich sehen konnte, was geschah.

Hier ist eine bessere Methode mit javascript.

function boxPop(id, positionValue, topValue, leftValue, heightValue, widthValue, marginValue) { 
 
    document.getElementById(id).style.position = positionValue; 
 
    document.getElementById(id).style.top = topValue; 
 
    document.getElementById(id).style.left = leftValue; 
 
    document.getElementById(id).style.height = heightValue; 
 
    document.getElementById(id).style.width = widthValue; 
 
    document.getElementById(id).style.margin = marginValue; 
 
}

#slot1 { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 20%; 
 
    height: 600px; 
 
    width: 60%; 
 
    margin: auto; 
 
    background: red; 
 
}

<div class="slot_content" id="slot1" onclick="boxPop('slot1', 'absolute', 
 
'10px', '20%', '600px', '60%', 'auto')"> 
 

 
</div>

Und hier ist eine bessere Art und Weise jQuery verwenden.

$(document).on("click", "#slot1", function(e) { 
 
    $(this).css({ 
 
    "position": "absolute", 
 
    "top": "10px", 
 
    "left": "20%", 
 
    "height": "600px", 
 
    "width": "60%", 
 
    "margin": "auto" 
 
    }); 
 
});

#slot1 { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 20%; 
 
    height: 600px; 
 
    width: 60%; 
 
    margin: auto; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="slot_content" id="slot1"> 
 

 
</div>