ਮੂਲ HTML: ਡਾਇਲਾਗ ਬਾਕਸ

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਸ਼ਾਇਦ ਕੰਮ ਕੀਤਾ ਹੈ ਮੈਂ ਮੂਲ ਦੇ ਬਾਰੇ ਲਿਖਾਂਗਾ ਸੰਵਾਦ ਤੱਤ ਅਤੇ ਮੈਂ ਇਸਨੂੰ ਕਿਵੇਂ ਵਰਤਦਾ ਹਾਂ. ਲਿਖਣ ਦੇ ਸਮੇਂ, ਸਹਾਇਤਾ, ਹੈਰਾਨੀ ਦੀ ਗੱਲ ਹੈ, ਇਹ ਸਭ ਮਹਾਨ ਨਹੀਂ ਹੈ.

ਸੰਵਾਦ ਤੱਤ

ਮੈਂ ਹਮੇਸ਼ਾਂ ਨਵੇਂ ਤੱਤਾਂ ਬਾਰੇ ਸਿੱਖਣ ਵਿੱਚ ਸਹਾਇਤਾ ਲਈ ਮੋਜ਼ੀਲਾ ਦੀ ਦੇਵ ਸਾਈਟ ਤੇ ਡੁਬਕੀ ਲਗਾਉਣਾ ਪਸੰਦ ਕਰਦਾ ਹਾਂ ਇਸ ਲਈ ਉਹ ਇਸਦਾ ਵਰਣਨ ਕਿਵੇਂ ਕਰਦੇ ਹਨ.

aol ਡੈਸਕਟਾਪ 9.7 ਜਵਾਬ ਨਹੀਂ ਦੇ ਰਿਹਾ ਹੈ

ਦੇ HTML ਤੱਤ ਇੱਕ ਡਾਇਲਾਗ ਬਾਕਸ ਜਾਂ ਹੋਰ ਇੰਟਰਐਕਟਿਵ ਕੰਪੋਨੈਂਟ, ਜਿਵੇਂ ਕਿ ਇੰਸਪੈਕਟਰ ਜਾਂ ਵਿੰਡੋ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ.

ਠੀਕ ਹੈ, ਪਰ ਇਸਦਾ ਕੀ ਅਰਥ ਹੈ? ਸੰਟੈਕਸ ਕਾਫ਼ੀ ਸਰਲ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਇਸ ਲਈ ਆਓ ਇਸ ਨੂੰ ਕਰੀਏ.

 Test dialog

ਇੱਕ ਸਮਰਥਿਤ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਇਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ.

ਅਤੇ ਸਾਡੇ ਕੋਲ ਇਹ ਹੈ, ਪੜ੍ਹਨ ਲਈ ਧੰਨਵਾਦ ... ਓਹ, ਅਸੀਂ ਅਜੇ ਪੂਰਾ ਨਹੀਂ ਕੀਤਾ ਹੈ. ਸਾਨੂੰ ਵਾਰਤਾਲਾਪ ਦੇ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਇਸ ਨੂੰ ਹਰ ਸਮੇਂ ਉਥੇ ਰੱਖਣਾ ਅਸਲ ਵਿੱਚ ਉਹ ਲਾਭਦਾਇਕ ਨਹੀਂ ਹੈ. ਮੋਜ਼ੀਲਾ ਸਾਨੂੰ ਉਪਯੋਗ ਦੀ ਉਦਾਹਰਣ ਦਿੰਦਾ ਹੈ ਪਰ ਇਸਦੇ ਨਾਲ ਜਾਣ ਲਈ ਕੋਈ ਜਾਣਕਾਰੀ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਆਓ ਕਿਤੇ ਹੋਰ ਵੇਖੀਏ.

ਡਬਲਯੂ 3 ਵਿਸ਼ੇਸ਼ਤਾ

ਜਦੋਂ ਸ਼ੱਕ ਹੋਵੇ ਤਾਂ ਵੱਲ ਜਾਓ ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਯਕੀਨਨ ਸਾਡੇ ਕੋਲ ਸੰਵਾਦ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਲਈ 3 ਫੰਕਸ਼ਨ ਹਨ ਅਤੇ ਉਨ੍ਹਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਦਾ ਵੇਰਵਾ ਹੈ.

ਸੰਵਾਦ. ਸ਼ੋਅ ([ਐਂਕਰ])

ਡਾਇਲਾਗ ਐਲੀਮੈਂਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ.

ਦਲੀਲ, ਜੇ ਪ੍ਰਦਾਨ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਇੱਕ ਐਂਕਰ ਪੁਆਇੰਟ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ ਜਿਸ ਨਾਲ ਤੱਤ ਸਥਿਰ ਹੋ ਜਾਵੇਗਾ.

ਸੰਵਾਦ. ਸ਼ੋਅ ਮੋਡਲ ([ਐਂਕਰ])

ਡਾਇਲਾਗ ਐਲੀਮੈਂਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਸਭ ਤੋਂ ਉੱਤਮ ਮਾਡਲ ਡਾਇਲਾਗ ਬਣਾਉਂਦਾ ਹੈ.

ਦਲੀਲ, ਜੇ ਪ੍ਰਦਾਨ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਇੱਕ ਐਂਕਰ ਪੁਆਇੰਟ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ ਜਿਸ ਨਾਲ ਤੱਤ ਸਥਿਰ ਹੋ ਜਾਵੇਗਾ.

ਇਹ ਵਿਧੀ ਆਟੋਫੋਕਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਨਮਾਨ ਕਰਦੀ ਹੈ.

ਸੰਵਾਦ. ਬੰਦ ਕਰੋ ([ਨਤੀਜਾ])

ਡਾਇਲਾਗ ਤੱਤ ਬੰਦ ਕਰਦਾ ਹੈ.

ਦਲੀਲ, ਜੇ ਮੁਹੱਈਆ ਕੀਤੀ ਗਈ ਹੈ, ਇੱਕ ਵਾਪਸੀ ਮੁੱਲ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ.

ਇਸ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਿਆਉਣਾ

ਹੁਣ, ਇਸ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਿਆਉਣ ਦਾ ਇਹ ਮੇਰਾ ਆਪਣਾ ਤਰੀਕਾ ਹੈ ਜੇ ਤੁਹਾਨੂੰ ਲਗਦਾ ਹੈ ਕਿ ਇਸ ਤਰ੍ਹਾਂ ਨਹੀਂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਤਾਂ ਮੈਨੂੰ ਦੱਸੋ.

ਲੇਬਲਾਂ ਦੇ ਨਾਲ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਆਈਡੀ ਦੁਆਰਾ ਕਿਸੇ ਤੱਤ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਦਿੰਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਲੇਬਲ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ. ਇਸ ਨੇ ਮੈਨੂੰ ਡਾਟਾ-ਮਾਡਲ-ਫਾਰ, ਡਾਟਾ ਰੱਖਣ ਲਈ ਪ੍ਰੇਰਿਤ ਕੀਤਾ ਕਿਉਂਕਿ ਇਹ ਅਸਲ ਗੁਣ ਨਹੀਂ ਹੈ.

Open modal This is a dialog box and, believe it or not, it's built into HTML, sure we needed some javascript to open it but hey, it's a start.
 Close modal dialog { border: none; border-radius: 2px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); max-width: 60vw; } const modalTriggers = document.querySelectorAll(`[data-modal-for]`); for (let trigger of modalTriggers) {  
 const modal = document.getElementById(trigger.dataset.modalFor);  
 trigger.addEventListener(‘click’, () => {  
 trigger.hasAttribute(‘open’) && modal.showModal();  
 trigger.hasAttribute(‘close’) && modal.close();  
 });  
 }

ਇੱਕ ਸਹਿਯੋਗੀ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ, ਬਟਨ ਦਬਾਉਣ ਤੋਂ ਬਾਅਦ ਇਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ.

ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਿਆਖਿਆ ਕਰੋ

ਮੈਂ ਇਹ ਮੰਨਣ ਜਾ ਰਿਹਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੀ ਕਰਦੀ ਹੈ ਇਸ ਲਈ ਮੈਂ ਇਹ ਦੱਸਣ ਜਾ ਰਿਹਾ ਹਾਂ ਕਿ ਮੈਂ ਇਸਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਕਿਉਂ ਕੀਤਾ ਹੈ.

ਪਹਿਲਾਂ, ਮੈਂ ਉਨ੍ਹਾਂ ਸਾਰੇ ਤੱਤਾਂ ਦੀ ਚੋਣ ਕਰਦਾ ਹਾਂ ਜੋ ਮੈਂ ਡਾਟਾ-ਮਾਡਲ-ਫੌਰ ਐਟਰੀਬਿਟ ਨੂੰ ਦਿੱਤੇ ਹਨ ਫਿਰ ਮੈਂ ਉਨ੍ਹਾਂ ਵਿੱਚ ਇਵੈਂਟ ਲਿਸਟਨਰਸ ਸ਼ਾਮਲ ਕਰਦਾ ਹਾਂ. ਮੈਂ ਇਹ ਵੀ ਦੱਸਦਾ ਹਾਂ ਕਿ ਉਹ ਡਾਇਲਾਗ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਗੇ, ਇਹ ਦੱਸਣ ਲਈ ਮੈਂ ਆਪਣੇ ਟਰਿੱਗਰ ਤੱਤਾਂ ਨੂੰ ਇੱਕ ਖੁੱਲਾ ਜਾਂ ਬੰਦ ਗੁਣ ਦਿੰਦਾ ਹਾਂ

ਮੈਂ ਜਾਣਦਾ ਹਾਂ ਕਿ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਕੋਈ ਵੀ ਗਤੀਸ਼ੀਲ createdੰਗ ਨਾਲ ਬਣਾਏ ਗਏ ਤੱਤ ਬਾਕਸ ਦੇ ਬਾਹਰ ਕੰਮ ਨਹੀਂ ਕਰਨਗੇ ਪਰ ਇਹ ਅਜੇ ਵੀ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਸੀ ਜਿਸ ਬਾਰੇ ਮੈਂ ਸੋਚ ਸਕਦਾ ਸੀ.

istio ਮਲਟੀਪਲ ਪ੍ਰਵੇਸ਼ ਗੇਟਵੇ

ਹਸਤਾਖਰ ਬੰਦ

ਮੈਨੂੰ ਦੱਸੋ ਜੇ ਤੁਸੀਂ ਇਹ ਚੀਜ਼ਾਂ ਪਸੰਦ ਕਰਦੇ ਹੋ ਜੋ ਅਸੀਂ ਅਸਲ ਵਿੱਚ ਅਜੇ ਨਹੀਂ ਵਰਤ ਸਕਦੇ ਪਰ ਸ਼ਾਇਦ ਇੱਕ ਦਿਨ ਦੀਆਂ ਪੋਸਟਾਂ. ਮੈਨੂੰ ਪਲੇਟਫਾਰਮ ਦੀ ਤਰੱਕੀ ਦਿਲਚਸਪ ਲੱਗਦੀ ਹੈ ਅਤੇ ਸਾਂਝਾ ਕਰਨ ਦਾ ਅਨੰਦ ਲੈਂਦਾ ਹਾਂ.

ਮੂਲ ਰੂਪ ਵਿੱਚ ਦੁਆਰਾ ਪ੍ਰਕਾਸ਼ਤ ਐਂਡਰਿ B ਬੋਨ 'ਤੇ dev.to

============================

ਪੜ੍ਹਨ ਲਈ ਧੰਨਵਾਦ: ਦਿਲ: ਜੇ ਤੁਹਾਨੂੰ ਇਹ ਪੋਸਟ ਪਸੰਦ ਆਈ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਆਪਣੇ ਸਾਰੇ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਦੋਸਤਾਂ ਨਾਲ ਸਾਂਝਾ ਕਰੋ! ਮੇਰੇ ਤੇ ਪਾਲਣਾ ਕਰੋ ਫੇਸਬੁੱਕ | ਟਵਿੱਟਰ

ਜਿਆਦਾ ਜਾਣੋ

☞ ਐਡਵਾਂਸਡ ਸੀਐਸਐਸ ਅਤੇ ਸਾਸ: ਫਲੇਕਸਬਾਕਸ, ਗਰਿੱਡ, ਐਨੀਮੇਸ਼ਨ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ!

☞ HTML5 ਅਤੇ CSS3 ਨਾਲ ਜਵਾਬਦੇਹ ਰੀਅਲ ਵਰਲਡ ਵੈਬਸਾਈਟਾਂ ਬਣਾਉ

☞ CSS - ਸੰਪੂਰਨ ਗਾਈਡ (ਫਲੇਕਸਬਾਕਸ, ਗਰਿੱਡ ਅਤੇ ਸਾਸ ਸਮੇਤ)

☞ ਸ਼ੁਰੂਆਤੀ ਪੂਰਾ ਸਟੈਕ ਵੈਬ ਵਿਕਾਸ: HTML, CSS, ਪ੍ਰਤੀਕਿਰਿਆ ਅਤੇ ਨੋਡ

☞ ਸ਼ੁਰੂਆਤ ਤੋਂ ਆਧੁਨਿਕ HTML ਅਤੇ CSS (ਸਾਸ ਸਮੇਤ)

#html5 #html

dev.to