Wie definiere ich CSS-Klasse in einem Inline-CSS?

Question

Ich möchte einen Popup-Bildschirm erstellen, wenn ich auf ein Symbol auf meiner Profilseite eines Spiels klicke. Die Entwickler haben uns Zugriff auf HTML-Codes in unserem Profilbereich gewährt, obwohl die Verwendung der STYLE-Tags blockiert ist. Ich habe auch keinen Zugriff auf den Kopfbereich der HTML-Codes, daher kann ich keine externe Datei erstellen, um die CSS-Klasse zu definieren und sie mit der Profilseite zu verknüpfen.

Im Folgenden habe ich ein Beispiel für meine Codes erstellt. Im Beispielcode habe ich einen externen CSS-Code erstellt. Ich möchte wissen, wie ich diese externen CSS in meinen HTML-Code bekommen kann (unter Verwendung der Inline-CSS-Methode). Mein Problem ist das Definieren der CSS-Klasse in einer Inline-CSS-Methode.

Dinge zu wissen, bevor die Beantwortung meiner Frage:

1) Cant eine externe Datei für CSS erstellen.

2) Kann Codes nicht innerhalb der HEAD-Tags schreiben.

3) Verwenden Sie nicht das STYLE-Tag.

4) Nur HTML-Codes sind erlaubt. BBCodes sind nicht erlaubt.

Mein HTML-Code sieht wie folgt aus:

.overlay { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
background: rgba(0,0,0,0.5); 
transition: opacity 200ms; 
visibility: hidden; 
opacity: 0; 
&.light { 
    background: rgba(255,255,255,0.5); 
} 
.cancel { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    cursor: default; 
} 
&:target { 
    visibility: visible; 
    opacity: 1; 
} 
} 

.popup { 
margin: 75px auto; 
padding: 20px; 
background: #fff; 
border: 1px solid #666; 
width: 300px; 
box-shadow: 0 0 50px rgba(0,0,0,0.5); 
position: relative; 
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
.light & { 
    border-color: #aaa; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.25); 
} 
h2 { 
    margin-top: 0; 
    color: #666; 
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
} 
.close { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 20px; 
    right: 20px; 
    opacity: 0.8; 
    transition: all 200ms; 
    font-size: 24px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #666; 
    &:hover { 
    opacity: 1; 
    } 
} 
.content { 
    max-height: 400px; 
    overflow: auto; 
} 
p { 
    margin: 0 0 1em; 
    &:last-child { 
    margin: 0; 
    } 
} 
} 

Answer 1

Sie müssen etwas tun, das mit Hilfe von HTML:

<p> 
<a class="button" href="#popup1"> 
    <img src="SOME ICON URL HERE"> 
</a> 
</p> 

<div id="popup1" class="overlay light"> 
<a class="cancel" href="#"></a> 
<div class="popup"> 
    <h2>TITLE</h2> 
    <div class="content"> 
    <p>PARAGRAPH ONE GOES HERE</p> 
    <p>PARAGRAPH TWO GOES HERE</p> 
    </div> 
</div> 
</div> 

Mein externer CSS-Code sieht wie folgt aus Inline-Ausführung

<div id="popup1" style="<!-- styles here -->"> 
    <!-- other code here --> 
</div>