קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
HTML
<dialog id="MegaDialog" inert loading modal-mode="mega">
<form method="dialog">
<header>
<section class="icon-headline">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
<h3>New User</h3>
</section>
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <button onclick="this.closest('dialog').close('close')" type="button" title="Close dialog"> -->
<title>Close dialog icon</title>
<svg width="24" height="24" viewBox="0 0 24 24">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</header>
<article>
<section class="labelled-input">
<label for="userimage">Upload an image</label>
<input id="userimage" name="userimage" type="file">
</section>
<small><b>*</b> Maximum upload 1mb</small>
</article>
<footer>
<menu>
<button type="reset" value="clear">Clear</button>
</menu>
<menu>
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <button autofocus type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button> -->
<button type="submit" value="confirm">Confirm</button>
</menu>
</footer>
</form>
</dialog>
<dialog id="MiniDialog" inert loading modal-mode="mini">
<form method="dialog">
<article>
<section class="warning-message">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" >
<title>A warning icon</title>
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
<p>Are you sure you want to remove this user?</p>
</section>
</article>
<footer>
<menu>
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <button autofocus type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button> -->
<button type="submit" value="confirm">Confirm</button>
</menu>
</footer>
</form>
</dialog>
CSS
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
html:has(dialog[open][modal-mode="mega"]) {
overflow: hidden;
}
dialog {
display: grid;
background: var(--surface-2);
color: var(--text-1);
max-inline-size: min(90vw, var(--size-content-3));
max-block-size: min(80vh, 100%);
max-block-size: min(80dvb, 100%);
margin: auto;
padding: 0;
position: fixed;
inset: 0;
border-radius: var(--radius-3);
box-shadow: var(--shadow-6);
z-index: var(--layer-important);
overflow: hidden;
transition: opacity .5s var(--ease-3);
@media (--motionOK) {
animation: var(--animation-scale-down) forwards;
animation-timing-function: var(--ease-squish-3);
}
@media (--OSdark) {
border-block-start: var(--border-size-1) solid var(--surface-3);
}
@media (--md-n-below) {
&[modal-mode="mega"] {
margin-block-end: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
@media (--motionOK) {
animation: var(--animation-slide-out-down) forwards;
animation-timing-function: var(--ease-squish-2);
}
}
}
&:not([open]) {
pointer-events: none;
opacity: 0;
}
&[modal-mode="mega"]::backdrop {
backdrop-filter: blur(25px);
}
&[modal-mode="mini"]::backdrop {
backdrop-filter: none;
}
&::backdrop {
transition: backdrop-filter .5s ease;
}
&[loading] {
visibility: hidden;
}
&[open] {
@media (--motionOK) {
animation: var(--animation-slide-in-up) forwards;
}
}
& > form {
display: grid;
grid-template-rows: auto 1fr auto;
align-items: start;
max-block-size: 80vh;
max-block-size: 80dvb;
& > article {
overflow-y: auto;
max-block-size: 100%; /* safari */
overscroll-behavior-y: contain;
display: grid;
justify-items: flex-start;
gap: var(--size-3);
box-shadow: var(--shadow-2);
z-index: var(--layer-1);
padding-inline: var(--size-5);
padding-block: var(--size-3);
@media (--OSlight) {
background: var(--surface-1);
&::-webkit-scrollbar {
background: var(--surface-1);
}
}
@media (--OSdark) {
border-block-start: var(--border-size-1) solid var(--surface-3);
}
}
& > header {
display: flex;
gap: var(--size-3);
justify-content: space-between;
align-items: flex-start;
padding-block: var(--size-3);
padding-inline: var(--size-5);
& > button {
border-radius: var(--radius-round);
padding: .75ch;
aspect-ratio: 1;
flex-shrink: 0;
place-items: center;
stroke: currentColor;
stroke-width: 3px;
}
}
& > footer {
display: flex;
flex-wrap: wrap;
gap: var(--size-3);
justify-content: space-between;
align-items: flex-start;
padding-inline: var(--size-5);
padding-block: var(--size-3);
& > menu {
display: flex;
flex-wrap: wrap;
gap: var(--size-3);
padding-inline-start: 0;
&:only-child {
margin-inline-start: auto;
}
@media (max-width: 410px) {
& button[type="reset"] {
display: none;
}
}
}
}
& > :is(header, footer) {
background-color: var(--surface-2);
@media (--OSdark) {
background-color: var(--surface-1);
}
}
}
}
JS
// custom events to be added to
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2023-10-25 (שעון UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"חסרים לי מידע או פרטים"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"התוכן מורכב מדי או עם יותר מדי שלבים"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"התוכן לא עדכני"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"בעיה בתרגום"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"בעיה בדוגמאות/בקוד"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"סיבה אחרת"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"התוכן קל להבנה"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"התוכן עזר לי לפתור בעיה"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"סיבה אחרת"
}]