Δημιουργούμε ένα div και του δήνουμε την κλάσση dialog-box και ώς id κάτι μοναδικό. Μέσα σε αυτό το div, βάζουμε το περιεχόμενο που θέλουμε να έχει. Μπορούμε να εμφανίσουμε το dialog με 2 τρόπους:
- Βάζοντας την κλάσση autoShow στο div. Αυτό θα κάνει το dialog να εμφανιστεί μόλις φορτώσει η σελίδα.
- Με κουμπί. Δημιουργούμε ένα link και στο πεδίο URL βάζουμε # και το id που δώσαμε στο div, ενώ στην κλάσση βάζουμε showDialog .
Στο dialog μπορούμε να βάλουμε link με την κλάσση closeButton . Όταν πατηθούν αυτά τα link θα κλείσουν το dialog.
Αυτά είναι τα βασικά. Ακολουθούν μερικά παραδείγματα.
| Default |
|---|
|
dialog-box Αυτό είναι ένα απλό dialog. Για να κλείσει κάνουμε κλικ έξω από το dialog ή προερετικά βάζουμε ένα κουμπί με την κλάσση closeButton . Μπορούμε να έχουμε όσα τέτοια κουμπιά θέλουμε μέσα στο dialog και αυτό που κάνουν είναι να το κλείνουν μόλις πατηθούν. Κλικ εδώ για να δείτε το dialog Maecenas lobortis lectus leo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet non lacus ullamcorper suscipit. Curabitur posuere pellentesque dui nec ullamcorper. Sed eros neque, imperdiet a euismod lacinia, pretium eget nisl. Sed vestibulum semper suscipit. Fusce et porttitor augue, id hendrerit massa. Ut luctus porta nulla, tristique ullamcorper dolor eleifend porta. Proin quis leo molestie, placerat velit id, mattis diam. Mauris ultricies ultrices est ac congue. Nullam posuere velit purus, eu posuere tellus laoreet laoreet. Maecenas lobortis lectus leo, vitae tempor ligula auctor quis. Nullam posuere mollis est faucibus lacinia. Ut non gravida dolor. Nullam auctor erat sed placerat tincidunt. Suspendisse gravida sodales leo. Cras ullamcorper orci eget ullamcorper ullamcorper. Nulla gravida risus sit amet magna tincidunt, vitae ultricies ante volutpat. Duis vel accumsan elit, sed fringilla enim. Ut vitae lacus eget libero convallis rhoncus. In aliquam in enim at laoreet. Suspendisse dignissim, felis quis interdum cursus, massa dui imperdiet quam, at sollicitudin nulla nunc hendrerit turpis. Vivamus cursus id leo sit amet maximus. Nullam blandit velit eu urna condimentum vulputate. Nullam elementum lectus sapien, et accumsan magna scelerisque vitae. Praesent ac magna augue. Fusce ut pellentesque nibh. Nunc tempor pulvinar ipsum eget hendrerit. Curabitur accumsan finibus mauris, at semper ante ullamcorper et.
|
| Αυτόματη προβολή |
|
dialog-box autoShow Αν προσθέσουμε στις κλάσσεις του div την κλάσση autoShow τότε το dialog θα εμφανιστεί μόλις φορτώσει τη σελίδα. Κλικ εδώ για να δείτε το dialog Αυτόματη προβολή Αυτό το dialog έχει την κλάσση autoShow που το κάνει να εμφανίζεται όταν φοτώσει η σελίδα
|
| Απενεργοποίηση κλεισίματος |
|
dialog-box persistent Το dialog κλείνει όταν ο χρήστης κάνει κλικ κάπου έξω από αυτό. Μπορούμε να απενεργοποιήσουμε αυτή τη λειτουργία αν προσθέσουμε την κλάσση persistent. Προσοχή όμως. Πρέπει να βάλετε εσείς κάποιον τρόπο για να μπορεί να φεύγει ο χρήστης. Κλικ εδώ για να δείτε το dialog
|
| Με φόντο |
|
Μπορούμε να βάλουμε μία εικόνα μέσα στο dialog και να της δώσουμε την κλάσση dialogBackground . Τότε θα μπεί ως φόντο. Κλικ εδώ για να δείτε το dialog Maecenas lobortis lectus leo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet non lacus ullamcorper suscipit. Curabitur posuere pellentesque dui nec ullamcorper. Sed eros neque, imperdiet a euismod lacinia, pretium eget nisl. Sed vestibulum semper suscipit. Fusce et porttitor augue, id hendrerit massa. Ut luctus porta nulla, tristique ullamcorper dolor eleifend porta. Proin quis leo molestie, placerat velit id, mattis diam. Mauris ultricies ultrices est ac congue. Nullam posuere velit purus, eu posuere tellus laoreet laoreet. Maecenas lobortis lectus leo, vitae tempor ligula auctor quis. Nullam posuere mollis est faucibus lacinia. Ut non gravida dolor. Nullam auctor erat sed placerat tincidunt. Suspendisse gravida sodales leo. Cras ullamcorper orci eget ullamcorper ullamcorper. Nulla gravida risus sit amet magna tincidunt, vitae ultricies ante volutpat. Duis vel accumsan elit, sed fringilla enim. Ut vitae lacus eget libero convallis rhoncus. In aliquam in enim at laoreet. Suspendisse dignissim, felis quis interdum cursus, massa dui imperdiet quam, at sollicitudin nulla nunc hendrerit turpis. Vivamus cursus id leo sit amet maximus. Nullam blandit velit eu urna condimentum vulputate. Nullam elementum lectus sapien, et accumsan magna scelerisque vitae.
|