W3.CSS مشروط
ومشروط هو مربع الحوار نافذة منبثقة / الذي يتم عرضه على رأس الصفحة الحالية:
كيفية إنشاء مشروط
مثال
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> انها محاولة لنفسك » فئة "W3-مشروط"
ومشروط يمكن أن يكون أي حاوية HTML (مثل <div>) مع الطبقة = "W3-مشروط".
فئة "W3 الوسائط المحتوى"
يجب وضع جميع محتوى الوسائط في وعاء HTML مع الطبقة = "W3 الوسائط المحتوى".
محتوى الوسائط يمكن أن يكون أي عنصر HTML (العناوين والفقرات والصور، وما إلى ذلك)
فتح مشروط
استخدام أي عنصر HTML لفتح مشروط. هذا هو في كثير من الأحيان على زر أو ارتباط.
إضافة سمة عند _ النقر وأشر إلى معرف مشروط (id01 في مثالنا)، وذلك باستخدام طريقة document.getElementById () وتحديد هوية فريدة من نوعها يطابق زر "الزناد" (id01).
إغلاق مشروط
ليغلق مشروط، إضافة الطبقة W3-closebtn إلى عنصر مع سمة عند _ النقر يشير إلى معرف مشروط (id01). يمكنك أيضا إغلاقه بواسطة النقر خارج مشروط (انظر المثال أدناه).
 | ومرات؛ (×) هو كيان HTML الذي هو رمز المفضل للأزرار وثيق، وبدلا من الحرف "س". |
|---|
مشروط رأس وتذييل
داخل <div> مع الطبقة = "W3 الوسائط المحتوى"، والطبقات استخدام W3-الحاويات إلى إنشاء أقسام مختلفة في مشروط:
مثال
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div> انها محاولة لنفسك » مشروط وبطاقة
لعرض مشروط كورقة، إضافة W3-الفؤاد * فئة إلى حاوية W3 الوسائط المحتوى:
شرطية المتحركة
استخدام أي من W3-الأرواح التكبير | الأعلى | قاع | الحق | دروس اليسار إلى الانزلاق في مشروط من اتجاه محدد:
مثال
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
انها محاولة لنفسك » يمكنك أيضا تتلاشى في لون الخلفية مشروط ل(W3-مشروط):
مشروط صورة
انقر على الصورة لعرضها في الحجم الكامل:
مثال
<img src="img_fjords.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_fjords.jpg">
</div>
انها محاولة لنفسك » مشروط معرض الصور
انقر على الصورة لعرضها في الحجم الكامل:
مثال
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
انها محاولة لنفسك » نموذج تسجيل الدخول مشروط
هذا المثال بإنشاء مشروط لتسجيل الدخول:
مشروط تبويب
هذا المثال بإنشاء مشروط مع محتوى كلفه:
إغلاق مشروط
في الأمثلة أعلاه، ونحن نستخدم زر لإغلاق مشروط. ومع ذلك، مع القليل من جافا سكريبت، يمكنك أيضا إغلاق مشروط عند النقر خارج منطقة الجزاء مشروط:
مثال
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
انها محاولة لنفسك »