English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل الأساسيات لـ Bootstrap

إضافة Bootstrap

إضافة نافذة التشغيل (Modal) لـ Bootstrap

نافذة التشغيل (Modal) هي نافذة فرعية مغطاة على نافذة الأب. غالبًا ما يكون الهدف هو عرض محتوى من مصدر منفرد، يمكن أن تكون هناك تفاعلات دون مغادرة نافذة الأب. يمكن للنافذة الفرعية تقديم معلومات، التفاعل وما إلى ذلك.

إذا كنت ترغب في الاستعانة بميزات هذا الإضافة بشكل مستقل، فإنك بحاجة إلى الاستعانة modal.jsأو، كما مقدمة إلى إضافات Bootstrap كما ذكر في الفصل، يمكنك الاستعانة bootstrap.js أو النسخة المضغوطة bootstrap.min.js.

طريقة الاستخدام

يمكنك تبديل محتويات إضافة النافذة المنقولة (Modal) الم隐蔽ة:

  • من خلال خصائص dataفي العنصر المسيطر (مثل الزر أو الرابط) ضبط الخصائص data-toggle="modal"، مع ضبط data-target="#identifier" أو href="#identifier" لتحديد النافذة المنقولة المحددة التي سيتم تبديلها (المتحتوية على id="identifier").

  • باستخدام JavaScriptباستخدام هذه التكنولوجيا، يمكنك تنفيذ سطر واحد من JavaScript لاستدعاء النافذة المنقولة التي يحتوي على id="identifier":

    $('#identifier').modal(options)

مثال عبر الإنترنت

مثال على نافذة منقولة ثابتة، مثل المثال التالي:

مثال عبر الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - إضافة نافذة منقولة (Modal)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>إنشاء نافذة منقولة (Modal)</h2>
<!--　按钮触发模态框　-->
<button　class="btn　btn-primary　btn-lg"　data-toggle="modal"　data-target="#myModal">
	بداية العرض لمساحة الحوارية
</button>
<!--　模态框(Modal)　-->
<div　class="modal　fade"　id="myModal"　tabindex="-1"　role="dialog"　aria-labelledby="myModalLabel"　aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button　type="button"　class="close"　data-dismiss="modal"　aria-hidden="true">
					×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					عنوان نافذة التمويل (Modal)
				</h4>
			</div>
			<div class="modal-body">
				إضافة بعض النصوص هنا
			</div>
			<div class="modal-footer">
				<button　type="button"　class="btn　btn-default"　data-dismiss="modal">إغلاق
				</button>
				<button type="button" class="btn btn-primary">
					تقديم التغييرات
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>
اختبار لمعرفة ‹/›

النتيجة كما يلي:

شرح الشيفرة:

  • للبدء في استخدام النافذة المنقولة، تحتاج إلى محفز. يمكنك استخدام زر أو رابط. هنا نستخدم الزر.

  • إذا نظرت بعناية إلى الشيفرة أعلاه، فإنك ستجد في علامة <button>،data-target="#myModal" هي النافذة المنقولة التي ترغب في تحميلها على الصفحة. يمكنك إنشاء عدة نافذات منقولة على الصفحة، ثم إنشاء محفزات مختلفة لكل نافذة منقولة. الآن، من الواضح أنك لا يمكنك تحميل عدة نافذات منقولة في نفس الوقت، ولكن يمكنك إنشاء عدة نافذات منقولة على الصفحة لتحميلها في أوقات مختلفة.

  • في النافذة المنقولة يجب الانتباه إلى نقطتين:

  • الأول هو .modal، يستخدم لتحديد محتويات <div> كنافذة منقولة.

  • الثاني هو .fade class. عندما يتم تبديل النافذة المنقولة، فإنها تسبب في إدخال وإخراج المحتويات بالتدرج.

  • aria-labelledby="myModalLabel"،تقوم هذه الخاصية بالإشارة إلى عنوان النافذة المنبثقة.

  • خاصية aria-hidden="true" تستخدم للحفاظ على عدم رؤية نافذة الحوار حتى يتم إطلاق مستشعر (مثل النقر على الزر المحدد).

  • <div>،modal-header هي صفة تستخدم لتعيين أنماط الرأس لنافذة الحوار.

  • class="close"،close هي صفة CSS تستخدم لتعيين أنماط زر إغلاق نافذة الحوار.

  • data-dismiss="modal"،هي خاصية بيانات HTML5 مخصصة. هنا يتم استخدامها لإغلاق نافذة الحوار.

  • class="modal-body"،هي صفة CSS في Bootstrap CSS تستخدم لتعيين أنماط الجسم الرئيسي لنافذة الحوار.

  • class="modal-footer"،هي صفة CSS في Bootstrap CSS تستخدم لتعيين أنماط للقاعدة السفلية لنافذة الحوار.

  • data-toggle="modal"،يستخدم خاصية البيانات data-toggle المخصصة في HTML5 لفتح نافذة الحوار.

الخيارات

هناك خيارات يمكن استخدامها لتخصيص مظهر وسلوك نافذة الحوار (Modal Window)، وهي تتم عبر خاصية البيانات أو JavaScript. يظهر الجدول التالي هذه الخيارات:

اسم الخيارنوع/القيمة الافتراضيةاسم خاصية البياناتوصف
backdropboolean أو string 'static'
القيمة الافتراضية: true		data-backdropتحديد خلفية ثابتة، حيث لا يتم إغلاق النافذة المنبثقة عند النقر على الخارجية.
keyboardboolean
القيمة الافتراضية: true		data-keyboardإغلاق النافذة المنبثقة عند ضغط مفتاح escape، وإذا تم تعيينها إلى false فإن الضغط على المفتاح يكون غير فعال.
showboolean
القيمة الافتراضية: true		data-showتظهر النافذة المنبثقة عند التحميل.
remotepath
القيمة الافتراضية: false		data-remoteاستخدام jQuery .load الطريقة، تضيف محتوى لجسم النافذة المنبثقة. إذا تم إضافة رابط يحتوي على عنوان URL صالح، سيتم تحميل المحتوى الموجود فيه. كما هو موضح في المثال التالي:
<a data-toggle="modal" href="remote.html" data-target="#modal">انقر هنا</a>

الطريقة

هناك بعض الطرق المفيدة التي يمكن استخدامها مع modal()。

الطريقةوصفمثال
خيارات: .modal(options)تحويل المحتوى إلى نافذة حوارية نشطة. يُقبل خيار خيارات اختياري.
('$identifier').modal({
keyboard:　false
})
تغيير: .modal('toggle')تغيير نافذة الحوارة يدويًا.
('$identifier').modal('toggle')
عرض: .modal('show')فتح نافذة الحوارة يدويًا.
('$identifier').modal('show')
إخفاء: .modal('hide')إخفاء نافذة الحوارة يدويًا.
('$identifier').modal('hide')

مثال عبر الإنترنت

هذا المثال يوضح استخدام الطريقة:

مثال عبر الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال على Bootstrap - طريقة إضافة (Modal) المساحة الحوارية</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>طريقة إضافة (Modal) المساحة الحوارية</h2>
<!--　按钮触发模态框　-->
<button　class="btn　btn-primary　btn-lg"　data-toggle="modal"　data-target="#myModal">
	بداية العرض لمساحة الحوارية
</button>
<!--　模态框(Modal)　-->
<div　class="modal　fade"　id="myModal"　tabindex="-1"　role="dialog"　aria-labelledby="myModalLabel"　aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"　
						aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					عنوان نافذة التمويل (Modal)
				</h4>
			</div>
			<div class="modal-body">
				الضغط على زر ESC للخروج.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">إغلاق
				</button>
				<button type="button" class="btn btn-primary">
					تقديم التغييرات
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
اختبار لمعرفة ‹/›

النتيجة كما يلي:

كما يكفي الضغط على مفتاح ESC لتغلق النافذة التمويلية.

أحداث

في الجدول أدناه قائمة بأحداث النافذة التمويلية المستخدمة. يمكن استخدام هذه الأحداث كخوذ في الدالة.

أحداثوصفمثال
show.bs.modalتُشغل بعد استدعاء طريقة show.
$('#identifier').on('show.bs.modal', function () {
　　// قم بتنفيذ بعض الأفعال...
})
shown.bs.modalتُشغل عند وجود نافذة التمويل أمام المستخدم (سيتم انتظار اكتمال تأثير التحويل CSS).
$('#identifier').on('shown.bs.modal', function () {
　　// قم بتنفيذ بعض الأفعال...
})
hide.bs.modalعند استدعاء مثال طريقة hide.
$('#identifier').on('hide.bs.modal', function () {
　　// قم بتنفيذ بعض الأفعال...
})
hidden.bs.modalيتم إطلاق هذا عند إخفاء النافذة المنبثقة بالكامل من المستخدم.
$('#identifier').on('hidden.bs.modal', function () {
　　// قم بتنفيذ بعض الأفعال...
})

مثال عبر الإنترنت

الآن، يظهر هذا المثال استخدام الأحداث:

النتيجة كما يلي:

كما هو موضح في مثال أعلاه، إذا قمت بالنقر على إغلاق أزرار، أي إخفاء إذا حدثت أي أحداث، سيتم عرض رسالة تحذير.

ملحق قائمة السقوط Bootstrapملحق التأثيرات الإنتقالية Bootstrap