Πώς να καλέσετε ένα παράθυρο Modal σε HTML. Απλό παράθυρο Modal σε CSS χωρίς JS

3. Παράδειγμα του παραθύρου Modal JQuery που προκαλείται από αναφορά (με επίδειξη)

Πιθανότατα έχετε ήδη δει ένα pop-up online στο Διαδίκτυο modal παράθυρο - Επιβεβαίωση εγγραφής, προειδοποίηση, πληροφορίες αναφοράς, λήψη αρχείων και πολλά άλλα. Σε αυτό το μάθημα, θα προσφέρω πολλά παραδείγματα για να δημιουργήσω τα πιο απλά παράθυρα modal.

Δημιουργήστε ένα απλό παράθυρο Modal Pop-up

Θα προχωρήσουμε στο να εξετάσουμε τον κωδικό του απλούστερου παραθύρου modal που θα εμφανιστεί αμέσως
jquery κώδικας

Τοποθετήστε τον κωδικό οπουδήποτε στο Σώμα. Τη σελίδα σας. Αμέσως μετά τη λήψη της σελίδας, χωρίς εντολές, θα δείτε το επόμενο παράθυρο:

Αλλά ο ακόλουθος κώδικας θα πραγματοποιηθεί μετά τη φόρτωση ολόκληρης της σελίδας στο πρόγραμμα περιήγησης. Στο παράδειγμά μας, μετά τη φόρτωση μιας σελίδας με εικόνες, θα εμφανιστεί ένα απλό αναδυόμενο παράθυρο:

Καλώντας το παράθυρο Modal JQuery με αναφορά με το CSS

Το επόμενο βήμα θα είναι η δημιουργία modal παράθυρο Όταν κάνετε κλικ στο σύνδεσμο. Το φόντο θα χαλαρώσει αργά.

Μπορείτε να δείτε συχνά ότι η φόρμα εισόδου και εγγραφής βρίσκεται σε τέτοια παράθυρα. Αρχίζουμε να δουλεύουμε

Για να ξεκινήσετε, γράψτε html μέρος. Αυτός ο κωδικός τοποθετείται στο σώμα του εγγράφου σας.

Καλέστε ένα παράθυρο Modal

Κωδικός CSS. Είτε σε ένα ξεχωριστό αρχείο CSS είτε σε
Στον κώδικα JQuery, η κύρια προσοχή θα επικεντρωθεί στη θέση του παραθύρου Modal και της μάσκας, στην περίπτωσή μας ένα σταδιακό φόντο.

Προσοχή! Μην ξεχάσετε να συνδέσετε τη βιβλιοθήκη στο κεφάλι του εγγράφου!

Σύνδεση βιβλιοθήκης από την Google. Καλά, ακριβώς ο ίδιος ο κωδικός jquery.

Jquery κώδικας

Γεια σε όλους! Σε αυτή τη μικρή τάξη, θα δημιουργήσουμε ένα απλό, αλλά ισχυρό παράθυρο Modal σε καθαρό CSS. Και ταυτόχρονα επαναλαμβάνουμε (και για τους οποίους θα ανοίξω) ένα τέτοιο χρήσιμο πράγμα όπως το FlexBox. Ταυτόχρονα, θα δημιουργήσουμε μόνο ένα παράθυρο Modal που ανοίγει κάνοντας κλικ και το οποίο είναι τοποθετημένο ακριβώς στο κέντρο της οθόνης. Μια φορά κι έναν καιρό θα μπορούσε να γίνει μόνο με Χρησιμοποιώντας το JavaScriptΑλλά ο χρόνος πηγαίνει και τώρα μπορεί να γίνει χρησιμοποιώντας κυριολεκτικά 4 γραμμές κώδικα.

Ανοίξτε το παράθυρο Modal

Όλα αυτά το παράθυρο Modal αποτελείται από δύο στρώματα - το πρώτο στρώμα, το οποίο έχει μια τάξη Modalwindow., σκουραίνει ολόκληρο το χώρο γύρω από το παράθυρο Modal και θα ευθυγραμμίσει τα περιεχόμενα του παραθύρου στο κέντρο της οθόνης. Δεύτερη στρώση - Κατηγορία Modal_body. - Περιέχει το περιεχόμενο του ίδιου του modal παράθυρο.

Τώρα δημιουργήστε έναν κωδικό CSS για αυτό το σήμα:

Modal (θέση: σταθερή; οθόνη: Κανένα; κορυφή: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; z-index: 0; φόντο: rgba (0,0,0,0,0,7) - Κανένα: Κανένα;) .Modal: στόχος (οθόνη: flex; pointer-εκδηλώσεις: αυτόματη;) .modal_body (θέση: συγγενής; z-index: 2; οθόνη: μπλοκ; περιθώριο: αυτόματη; padding: 15px; φόντο: # # FFF;). Modallfull (θέση: απόλυτη, οθόνη: μπλοκ; z-index: 0; πλάτος: 100%; Ύψος: 100%;)

Ας δούμε το έργο του Modal Window και να διακρίνουμε πώς λειτουργεί.

Όπως βλέπουμε, όταν κάνετε κλικ στο "Open Modal Window", το παράθυρο Shads το παράθυρο και το παράθυρο του White Modal εμφανίζεται ακριβώς στο κέντρο. Σε αυτό μέχρι να σταματήσουμε και να αφιερώνουμε τον εαυτό σας τη θεωρία.

Από τότε που συμφωνήσαμε να μην χρησιμοποιήσουμε το JavaScript και δεν μπορεί να το βοηθήσουμε. Πατώντας τα στοιχεία, μπορούμε εύκολα να το κάνουμε με τη βοήθεια των CSS-ψευδο-τάξεις και τις συνδέσεις αγκύρωσης με το hash (για να καθορίσει ένα στοιχείο σε αυτή τη σελίδα) και ταυτότητα Με μια τιμή που πρέπει να είναι ίση με το δείκτη στη σύνδεση. Κοιτάξτε το παράδειγμα μας: href. Σύνδεσμοι Ι. ταυτότητα Το κύριο δοχείο του παραθύρου Modal έχει την ίδια τιμή - Modalwindow.. Αυτό είναι σημαντικό επειδή το πρόγραμμα περιήγησης πρέπει να καταλάβει ποια στοιχεία θα αλληλεπιδράσουν μεταξύ τους.

Στην περίπτωσή μας, το γενικό δοχείο του παραθύρου Modal είναι κρυμμένο και, κατά συνέπεια, όλο το περιεχόμενο του modal παράθυρο είναι κρυμμένο. Αλλά όταν κάνετε κλικ στο σύνδεσμο, το στοιχείο παίρνει μια ψευδο-κλάση : στόχος. Και κατά συνέπεια εμφανίζεται. Κοιτάξτε τον κώδικα CSS - Ακίνητα Απεικόνιση. Αλλαγές S. κανένας στο Καλώδιο. Σημειώστε ότι το Flex, επειδή με τη βοήθεια του μπορούμε να ευθυγραμμίσουμε Modal_body. Ακριβώς κεντρική οθόνη. Όλα τα άλλα στυλ που καταχωρίσαμε αμέσως.

Παρεμπιπτόντως, αν δεν καταλαβαίνετε πώς το έσπευσαν σε όλη την επιφάνεια της οθόνης, λέω - το όλο θέμα στις ακόλουθες 4 κάθεται:

Κορυφή: 0; Δεξιά: 0; Κάτω: 0; Αριστερά: 0;

Τονίζει ότι θα πρέπει να είναι σε ένα μηδέν pixel προς τα δεξιά, στα αριστερά, στην κορυφή και στο κάτω μέρος ταυτόχρονα. Αντ 'αυτού, μπορείτε να χρησιμοποιήσετε, για παράδειγμα, μια τέτοια διατήρηση:

Πλάτος: 100%. Ύψος: 100VH;

Εδώ καθορίζουμε ένα πλάτος ίσο με το 100% της οθόνης, αλλά το ύψος είναι καλύτερο να εγκατασταθεί με Ύψος προβολής - Το ύψος του παραθύρου του προγράμματος περιήγησης. Θα σταματήσω την έκδοση μου.

Μια άλλη σημαντική απόχρωση είναι η αξία της ιδιότητας Z-Index Τροπικός και Modal_body.. Πρέπει να είναι απαραιτήτως, και Modal_body. Πρέπει αναγκαστικά να είναι μεγαλύτερη αξία τουλάχιστον μία μονάδα, διαφορετικά το περιεχόμενο του modal παράθυρο δεν θα είναι διαθέσιμο - οι σύνδεσμοι και τα κουμπιά δεν θα είναι δυνατή η πίεση. Και αν υπάρχει μια περιεκτικότητα σε κύλιση εκεί, δεν θα λειτουργήσει, επειδή ένα στοιχείο θα επικαλύπτει το άλλο.

Θα συνεχίσουμε να δημιουργούμε το αριστούργημά σας. Όταν κάνετε κλικ, εμφανίζεται το παράθυρο Modal, αλλά δεν μπορούμε απλά να το κλείσουμε. Ας προσθέσουμε ένα κουμπί για να το κλείσετε:

Στην πραγματικότητα, ακυρώνει : στόχος. Για το παράθυρο Modal μας, παίρνει απλά την αρχική θέση - κρύβεται από το μάτι. Αλλά με αυτή την αναφορά υπάρχει κάποια λεπτότητα - όταν πατηθεί, το πρόγραμμα περιήγησης θα προσπαθήσει να βρει ένα τέτοιο στοιχείο, αλλά θα υποστεί φιάσκο και θα μετατρέψει τη σελίδα στην αρχή. Αυτή η συμπεριφορά είναι ένας από τους μικρούς μείους μιας τέτοιας προσέγγισης στην κατασκευή των τροποποιήσεων, αλλά μπορεί να το αντιμετωπίσει.

Για αυτό το χαρακτηριστικό href. Αναφορές που αλλάζουμε με «#» στο "#Modalwindowclose", και το κουμπί Link, το οποίο άνοιξε το παράθυρο, προσθέστε ένα χαρακτηριστικό ταυτότητα C το ίδιο νόημα. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό Ονομα.Αλλά σε html5 για να καθορίσετε την άγκυρα είναι καλύτερη και απαιτείται για να υποδείξει το χαρακτηριστικό ταυτότητα.

Ανοίξτε το παράθυρο Modal

Τώρα πατώντας το πρόγραμμα περιήγησης θα επαναφέρει στο κουμπί. Για χάρη της αλήθειας θέλω να πω ότι αυτή η άγκυρα θα βρίσκεται στην επάνω άκρη της οθόνης. Αλλά αν αυτό το κουμπί για το άνοιγμα βρίσκεται σε κεφαλίδα ή υποσέλιδο, τότε αυτό το πρόβλημα είναι ισοπεδωμένο. Και αν η κεφαλίδα έχει σταθερή θέση, θα είναι εξαιρετική καθόλου - για παράδειγμα, για να παραγγείλετε μια επανάκληση ή μια προ-παραγγελία / διαβούλευση, θα είναι ωραία και όταν κλείνετε το παράθυρο.

Εδώ είναι ένα παράδειγμα αυτού που κάναμε:

Μπορείτε να τροποποιήσετε περαιτέρω το δοχείο Modal_body. - Αυτά είναι περιορισμοί σε μέγεθος (έτσι ώστε να μην στεγνώσει το ύψος και το πλάτος). Και ένα ακόμα μικρό απόχρωμο - συνιστώ κώδικα με ένα παράθυρο modal, όποτε είναι δυνατόν, να καθίσετε μπροστά από την ετικέτα κλεισίματος

.

Αυτός είναι ο τρόπος με τον οποίο μπορείτε να κάνετε γρήγορα ένα modal παράθυρο. Αυτός ο κώδικας που γράψαμε μπορεί να χρησιμοποιηθεί στη βασική έκδοση προσθέτοντας τα απαραίτητα στυλ ανάλογα με τις ανάγκες.

Ελπίζω ότι το μάθημά μου ήταν χρήσιμο για εσάς. Καλή μέρα σε σας και πριν από τη νέα συνάντηση στα νησιά Ιστού!

Ένα απλό παράθυρο Modal για τον ιστότοπο μπορεί να γίνει χρησιμοποιώντας μόνο κώδικα HTML και CSS, χωρίς τη χρήση σεναρίων. Μετά από όλα, ένας μεγάλος αριθμός σεναρίων, φυσικά, δίνει το βάρος στον ιστότοπο και επιβραδύνει το έργο του.
Εναλλακτικά, κοιτάξτε αυτό το απλό παράθυρο Modal. Ελάχιστο κώδικα, αλλά αρκετά καλά. Φυσικά, δεν θα αυξηθεί στα παράθυρα της μονάδας JQuery, αλλά ακόμα.

CSS. Κωδικός που είναι επιθυμητός να τοποθετήσετε στο φύλλο στυλ, συνήθως είναι style.css

/ * Στυλ στυλ * / .window (θέση: σταθερή; κορυφή: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; φόντο: RGBA (0,0,0,0,0,7). Z-Index: 99999; -WEBKIT -TRANDATION: αδιαφάνεια 400ms ευκολία-in; -moz-methite: αδιαφάνεια 400ms ευκολία; μετάβαση: αδιαφάνεια 400ms Επαναφορά; οθόνη: none; target (οθόνη: Μπλοκ; pointere γεγονότα: αυτόματη;) .window\u003e div (πλάτος: 300px; θέση: συγγενής; περιθώριο: 10% αυτόματη; padding: 20px; συνοριακή ακτίνα: # f2f2f2; box-σκιά: 0px 0px 20px 2px ·). Κλείσιμο (φόντο: # cc3300; Χρώμα: #FFFFFF, Ύψος γραμμής: 25px; Θέση: Απόλυτη? Δεξιά: -12PX; Κείμενο-Ευθυγράμμιση: Κέντρο; Κορυφή: Κορυφή: · γραμματοσειρά- Βάρος: Bold · -Webkit-Border-Racius: 12px · -Moz-Border-Racius: 12px; συνοριακή ακτίνα: 12px; -moz-box-σκιά: 1px 1px 3px # 000; -webkit-box-shadow : 1px 1px 3px # 000; Σκιά κουτιού: 1px 1px 3px # 000;) .Close: Τοποθετήστε το δείκτη (Ιστορικό: # 990000;) / * Τέλος στυλ * /

Ρυθμίστε το πλάτος του modal παράθυρο αλλάζοντας το μέγεθος του πλάτους στο επιθυμητό. Στον κωδικό αυτό το μέρος σημειώνεται.

Λοιπόν, ο κώδικας HTML που τοποθετείται στη σωστή θέση. Αυτό είναι ουσιαστικά μια αναφορά στο άνοιγμα του Modali.

Σύνδεσμος κειμένου

Παράδειγμα

Εγκαταστήστε ένα απλό παράθυρο Modal στο WordPress

Η χρήση του τρόπου μέτρησης στο WordPress δεν είναι πρακτικά διαφορετική από την παραπάνω περιγραφόμενη. Μπορείτε να προσθέσετε ότι ένα shortcode μπορεί να προστεθεί σε αυτό, για παράδειγμα ανατροφοδότηση plugin cf-7.

Εάν πρέπει να τοποθετήσετε τη δυνατότητα να μην δημοσιεύετε, αλλά στα αρχεία προτύπων, απλά να βάλετε απλά Κωδικός HTML Στο επιθυμητό πρότυπο τόπου.

Απλό στο παράθυρο λειτουργιών Modal, το οποίο εκτελείται πλήρως σε καθαρά CSS, όπου μπορείτε να τοποθετήσετε διαφορετικές λειτουργίες για μια κλήση στον ιστότοπο. Πιθανώς, αυτός είναι ένας από τους πολλούς που συναντήθηκα από την επιλογή του Modal Window, από την άποψη των ρυθμίσεων του προστάτη, αλλά, καθώς και στην εγκατάσταση. Αλλά το κύριο πράγμα είναι η λειτουργικότητά του που δεν θα εγκαταλείψει τους άλλους. Επίσης, γίνεται από προεπιλογή κάτω Ελαφριά απόχρωσηόπου το κουμπί, η μορφή του σταυρού εγκαθίσταται στην επάνω δεξιά γωνία.

Που θα μεταβεί στη λειτουργία ταξιδιού ή απλά, έτσι ώστε το πλαίσιο να εξαφανίζεται, όπου ακόμη και σε αυτό το μικρό στοιχείο υπάρχει μια επίδραση στην αλλαγή της παλέτας χρώματος. Τώρα ο webmaster μπορεί να τοποθετηθεί στον ιστότοπο και να τοποθετήσει μια περιγραφή ή τους χειριστές σε αυτό, το οποίο μπορεί να εξάγει διαφορετικές κατηγορίες ως στατιστικές ή πληροφορίες.

Αλλά το γεγονός είναι, αν έχετε ένα σκούρο στυλ του πόρου, στη συνέχεια στο στυλ μπορείτε να αλλάξετε γρήγορα το εύρος ή να τοποθετήσετε μάλλον κάτω από το αρχικό σχεδιασμό. Εδώ είναι ένα από τα Πρότυπες μέθοδοι Πώς να κάνετε καθαρά CSS στο παράθυρο Modal, το οποίο θα ξεκινήσει όταν κάνετε κλικ στο κουμπί κάτω από τον σύνδεσμο με τη δέσμευση HTML. Το ίδιο το κουμπί είναι περισσότερο για την ορατότητα, όπου στο ύφος της αφαίρεσης μιας τάξης και το όνομα θα είναι το όνομα, το οποίο μπορεί να παραδοθεί τόσο στο πλαίσιο πλοήγησης είτε στον πίνακα ελέγχου, όπου βρίσκεται η κύρια λειτουργικότητα ή η θέση πλοήγησης.

Αυτό είναι όταν ελέγχετε ότι όλα λειτουργούν καλά:

Να εγκατασταθεί:

Παράθυρο με κουμπί

CSS.

Butksaton-Satokavate (
Οθόνη: Inline-Block?
Κείμενο-διακόσμηση: Κανένα;
Περιθώριο-δεξί: 7px;
Ακτίνα συνοριακής ακτίνας: 5px;
Padding: 7px 9px;
Ιστορικό: # 199A36;
Χρώμα: # fbf7f7! Σημαντικό;
}

Anelumen (
Εμφάνιση: Flex;
Θέση: Σταθερή.
Αριστερά: 0;
Κορυφή: -100%.
Πλάτος: 100%.
Ύψος: 100%.
Ευθυγράμμιση-αντικείμενα: Κέντρο;
Δικαιολογήστε-περιεχόμενο: κέντρο;
Αδιαφάνεια: 0;
-Webkit-μετάβαση: κορυφαία 0s .7, αδιαφάνεια .7s 0s;
Μετάβαση: Top 0s .7s, αδιαφάνεια .7s 0s;
}

Anelumen: στόχος (
Κορυφή: 0;
Αδιαφάνεια: 1;
-Webkit-μετάβαση: καμία?
Μετάβαση: Κανένα;
}

Anelumen σχήμα (
Πλάτος: 100%.
Μέγιστο πλάτος: 530px;
Θέση: συγγενής.
Padding: 1.8em;
Αδιαφάνεια: 0;
Ιστορικό-χρώμα: λευκό?
-Webkit-μετάβαση: αδιαφάνεια .7s;
Μετάβαση: αδιαφάνεια .7s;
}

Anelumen.lowingnuska σχήμα (
Ιστορικό: # f9f5f5;
Ραδιόφωνο: 7px;
Padding-top: 8px;
Σύνορα: 3px στερεό #aaaabad;
}

Anelumen.lowingnuska Εικόνα H2 (
Περιθώριο-κορυφή: 0;
Κάτω από το κάτω μέρος: 3px;
Κάτω από το κάτω μέρος: 1px στερεό # DCD7D7;
}

Anelumen: Σχηματισμός στόχου (
Αδιαφάνεια: 1;
}

Anelumen.lowingnuska .Compatibg-Ukastylish (
Κείμενο-διακόσμηση: Κανένα;
Θέση: Απόλυτη.
Δεξιά: 8px;
Κορυφή: 0px;
Μέγεθος γραμματοσειράς: 41px;
}

Anelumen .nedismiseg (
Αριστερά: 0;
Κορυφή: 0;
Πλάτος: 100%.
Ύψος: 100%.
Θέση: Σταθερή.
Ιστορικό-Χρώμα: RGBA (10, 10, 10, 0,87).
Περιεχόμενο: "";
Δρομέας: Προεπιλογή.
Ορατότητα: Κρυμμένο?
-Webkit-μετάβαση: όλα .7;
Μετάβαση: όλα .7;
}

ANELUMEN: Στόχος .nedismiseg (
Ορατότητα: ορατό.
}

Πρέπει επίσης να γνωρίζετε ότι το Stylistics του CSS και της ψευδοκάλως, αυτό είναι ένα από αυτά που δεν χρησιμοποιούνται πλήρως σύμφωνα με τις λειτουργίες CSS με πολλές ενδιαφέρουσες πιθανές εφαρμογές.

Ξεκινά όταν Διεύθυνση URL Οι σελίδες πληρούν το αναγνωριστικό στο στοιχείο σας ή μπορούν να εκφραστούν διαφορετικά, αυτό είναι όταν ο χρήστης πηδάει σε ένα συγκεκριμένο στοιχείο στη σελίδα.

Modal Windows - ένα συχνά χρησιμοποιούμενο εργαλείο στο οπλοστάσιο του Master Web. Είναι πολύ επιτυχημένο για την επίλυση Μεγάλος αριθμός Καθήκοντα, όπως η έξοδος των εντύπων εγγραφής, τα διαφημιστικά μπλοκ, τα μηνύματα και ούτω καθεξής.

Αλλά, παρά τη σημαντική θέση στην υποστήριξη πληροφοριών του έργου, τα παράθυρα του Modal εφαρμόζονται συνήθως σε JavaScript, τα οποία μπορούν να δημιουργήσουν προβλήματα κατά την επέκταση της λειτουργικότητας ή της αντίστροφης συμβατότητας.

Το HTML5 και το CSS3 σας επιτρέπουν να δημιουργείτε παράθυρα Modal με εξαιρετική ευκολία.

Html σήμανση

Το πρώτο βήμα προς τη δημιουργία ενός παραθύρου Modal είναι απλή και αποτελεσματική σήμανση:

Ανοίξτε το παράθυρο Modal

Μέσα στο στοιχείο DIV Το περιεχόμενο του modal παράθυρο τοποθετείται. Πρέπει επίσης να οργανώσετε έναν σύνδεσμο για να κλείσετε το παράθυρο. Για παράδειγμα, τοποθετήστε έναν απλό τίτλο και αρκετές παραγράφους. Πλήρης σήμανση για το παράδειγμά μας θα μοιάζει με αυτό:

Ανοίξτε το παράθυρο Modal

Στυλ

Δημιουργήστε μια τάξη modaldialog. Και αρχίζουν να σχηματίζονται εμφάνιση:

Modaldialog (θέση: σταθερή, font-οικογένεια: arial, helvetica, sans-serif; κορυφή: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; φόντο: RGBA (0,0,0,0,8) -IndEx: 99999; -Webkit-μετάβαση: αδιαφάνεια 400ms ευκολία-in; -moz-μετάβαση: αδιαφάνεια 400ms ευκολία; μετάβαση: αδιαφάνεια 400ms Επαναφορά; Εμφάνιση: Κανένα;

Το παράθυρό μας θα έχει σταθερή θέση, δηλαδή, μετατοπίζεται εάν μετακινηθείτε στη σελίδα με ένα ανοιχτό παράθυρο. Επίσης, το μαύρο φόντο μας θα επεκταθεί σε ολόκληρη την οθόνη.

Το φόντο θα έχει μια μικρή διαφάνεια, και επίσης να βρίσκεται πάνω από όλα τα άλλα στοιχεία χρησιμοποιώντας την ιδιοκτησία. z-δείκτη..

Στο τέλος, ορίζουμε τις μεταβάσεις για την έξοδο από το παράθυρο του Modal και το κρύβουμε σε μια ανενεργή κατάσταση.

Ίσως δεν γνωρίζετε την ιδιοκτησία Δείχνα-εκδηλώσεις.Αλλά σας επιτρέπει να ελέγχετε τον τρόπο με τον οποίο τα στοιχεία θα ανταποκριθούν στο πάτημα του κουμπιού του ποντικιού. Ορίσαμε την αξία της αξίας του για την τάξη modaldialog., αφού ο σύνδεσμος δεν πρέπει να ανταποκρίνεται στην πίεση του κουμπιού του ποντικιού όταν είναι ενεργή η κλάση Pseudo ": Στόχος".

Προσθέστε τώρα μια ψευδο τάξη : στόχος. Και στυλ για το παράθυρο Modal.

Modaldialog: στόχος (οθόνη: μπλοκ, δείκτες, συμβάντα δείκτη: αυτόματη;) .modaldialog\u003e div (πλάτος: 400px; θέση: συγγενής · περιθώριο: 10% αυτόματη · padding: 5px 20px 13px 20px · Border-Racius: 10px; φόντο: # Fff; φόντο: -moz-γραμμική-κλίση (#FFF, # 999); φόντο: -webkit-γραμμική-κλίση (# 999) φόντο: -ο-γραμμική-κλίση (#FFF, # 999); )

Ψευδο τάξη στόχος. Αλλάζει τη λειτουργία εξόδου του στοιχείου, οπότε το παράθυρο Modal θα εμφανιστεί όταν κάνετε κλικ στο σύνδεσμο. Αλλάζουμε επίσης την αξία του ακινήτου. Δείχνα-εκδηλώσεις..

Ορίζουμε το πλάτος του modal παράθυρο και τη θέση στη σελίδα. Προσδιορίζουμε επίσης την κλίση για το φόντο και τις στρογγυλεμένες γωνίες.

Κλείστε το παράθυρο

Τώρα πρέπει να εφαρμόσετε τη λειτουργικότητα κλεισίματος παραθύρου. Δημιουργούμε την εμφάνιση του κουμπιού:

Κλείσιμο (φόντο: # 606061; Χρώμα: #FFFFF, ύψος γραμμής: 25px, θέση: απόλυτη? Δεξιά: -12px; κείμενο-ευθυγράμμιση: Κέντρο; Κορυφή: Γραμματοσειρά: Κανένα; γραμματοσειρά- Βάρος: Bold · -Webkit-Border-Racius: 12px; -Moz-Bordius-Racius: 12px; συνοριακή ακτίνα: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3PX # 000; Σκιά κουτιού: 1px 1px 3px # 000;) .Close: Τοποθετήστε το πλήκτρο (Ιστορικό: # 00d9ff;)

Για το κουμπί μας, ορίζουμε το φόντο και τη θέση του κειμένου. Στη συνέχεια, τοποθετούμε το κουμπί, το κάνουμε γύρο χρησιμοποιώντας τις ιδιότητες δρομολόγησης του πλαισίου και σχηματίζουν μια ελαφριά σκιά. Όταν κόβετε το δείκτη του ποντικιού, θα αλλάξουμε το έγχρωμο φόντο.