# j-Modal

> Είναι μια απλή εναλλακτική λύση στο j-Form.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 5a76041f590225b70449ee690a631d7e450c72383edb26a560b6bf786039df71
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Είναι μια απλή εναλλακτική λύση στο `j-Form`.

- Λειτουργεί μόνο με `+v17`
- Το συστατικό μεταφέρει το περιεχόμενο αυτού του συστατικού κάτω από την ετικέτα `<body>` (εξαιτίας της θέσης)


__ΕΠΙΤΡΟΦΗ__:

- Ο τίτλος του `title {String}` (αλλάζει ένα στοιχείο `HTML` στην ετικέτα)
- `width {Number}` Μαγικό πλάτος
- Ο όρος `if {String}` για την εμφάνιση του μοντέλου, συγκρίνεται με την τιμή μέσα στο `path`
- `icon {String}` Συνολική εικονική χωρίς `ti-`
- `reload {String}` σύνδεση σε ένα παγκόσμιο `function(modal_component)` και εκτελείται εάν η φόρμα εμφανίζεται
- `submit {String}` σύνδεση σε ένα παγκόσμιο `function(hide)` και εκτελείται εάν το κουμπί υποβολής πιέζεται
- `cancel {String}` σύνδεση σε ένα παγκόσμιο `function(hide)` και εκτελείται εάν το κουμπί ακύρωσης πιέζεται
- Το `enter {Boolean}` καταγράφει αυτόματα το κλειδί `enter` και εκτελεί την υποβολή (προεπιλεγμένη: `false`)
- Το `center {Boolean}` συγκεντρώνει τη μορφή στη μέση της οθόνης
- `autofocus {Boolean/String}` μπορεί να επικεντρωθεί σε μια εισαγωγή. `String` === `jQuery selector` για την εισαγωγική
- `default {String}` ένα σύντομο alias για το `DEFAULT(default, true)`
- Το `zindex {Number}` μπορεί να επηρεάσει τον δείκτη z (προεπιλεγμένο: `12`)
- `align {Number}` Μοναδικός Σύνδεσμος `0` Ο προεπιλεγμένος (default) `1` Ο δεξί κάτω, `2` Αριστερά κάτω, `3` Αριστερά στην κορυφή `4` Το σωστό top
- Το ύψος του `height {Number}` είναι μικρότερο από το μέγεθος του `height`.
- __NEW__ `bg {Boolean}` μπορεί να ενεργοποιήσει / απενεργοποιεί ένα στρώμα υπόβαθρου (προεπιλεγμένο: `true`)
- __NEW__ `scrollbar {Boolean}` μπορεί να ενεργοποιήσει / απενεργοποιεί τη γραμμή στροφής (προεπιλεγμένη: `false`)

__Καλό να ξέρεις__:

Το περιεχόμενο του `j-Modal` χωρίζεται σε 3 μέρη: `header`, `body` και `footer`.Κάθε μέρος πρέπει να οριστεί.Το στοιχείο προσθέτει κλάσεις CSS σε κάθε μέρος, για παράδειγμα το πρώτο `div` θα περιέχει `ui-modal-header`, το δεύτερο `ui-modal-body` και το τρίτο `ui-modal-footer`.

---

Αυτό το στοιχείο υποστηρίζει τη δυναμική αξιολόγηση του περιεχομένου `<script type="text/html">`Το παρακάτω παράδειγμα περιέχει ένα σενάριο με HTML και το συστατικό αξιολογεί το περιεχόμενο εάν η j-Modal Θα εμφανιστεί (μόνο μία φορά)

```html
<ui-component name="modal" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>
```

Χρησιμοποιήστε το με `<ui-component name="modal">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html example.html
<ui-component name="modal" path="common.form" config="if:user;width:600;submit:usermodal_submit;icon:home" class="hidden">

	<!-- HEADER -->
	<div>
		<span class="link cancel"><i class="ti ti-times"></i></span>
		<label>Your title</label>
	</div>

	<!-- BODY -->
	<div>
		<div class="padding">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
		</div>
	</div>

	<!-- FOOTER -->
	<div>
		<span class="link cancel">Cancel</span>
		<button name="submit"><i class="ti ti-save"></i>Submit form</button>
	</div>

</ui-component>

<script>

	function usermodal_submit(hide) {
		alert('SUBMIT');
		hide();
	}

	var common = {};

	// Show the form
	common.form = 'user';
</script>
```