greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/arabic/bootstrap/modals/index.md

3.1 KiB
Raw Blame History

title localeTitle
Modals أخلاق

شرطية

النماذج عبارة عن نوافذ منبثقة لتوفير معلومات مهمة قبل مواصلة المتابعة.

لإنشاء مربعات حوار / نوافذ منبثقة أعلى الصفحة الحالية يوفر Bootstrap ملحقًا مشروطًا.

مثال الكود:

`

<html> <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

Open Modal

        <div class="modal-content"> 
          <div class="modal-header"> 
            <button  type="button" data-dismiss="modal" class="close">&times;</button> 
            <h4 class="modal-title">Modal Header</h4> 
          </div> 

          <div class="modal-body"> 
            Do you wish to continue? 
          </div> 

          <div class="modal-footer"> 
            <button class="btn btn-default"  data-dismiss="modal">close</button> 
          </div> 

        </div> 
    </div>
</html> `

فهم السمات والفئات المستخدمة:

a) data-toggle = "modal" : يُفتح الملف.

ب) data-target : يشير إلى معرف النموذج الذي يتم فتحه.

c) data-dismiss="modal" : يؤدي هذا إلى إغلاق النافذة المنبثقة عند النقر فوق زر الإغلاق.

د) .modal فئة .modal محتويات <div> كطريقة .modal .

ه) .modal-dialog فئة .modal-dialog الارتفاع المناسب وعرض مربع الحوار.

f) أنماط فئة .modal-content -modal modal.It يحتوي على أقسام رأس والجسم وتذييل الصفحة.

g). .modal-header فئة .modal-header إلى مقطع الرأس في .modal-header (العنوان وزر (×)).

ح) أنماط الطبقة .modal-title رأس الوسائط مع ارتفاع مناسب.

ط) أنماط الطبقة .modal-body من الوسائط (الحوار / المنبثقة). يمكن أن يكون لها علامات أخرى مثل <p>,<img>,<video> إلخ.

ط) أنماط الطبقة .modal-footer الصفحة تذييل الوسائط.

معلومات اكثر :

Bootstrap مشروط

إذا كنت ترغب في استكشاف Bootstrap 4.0 (إصدار Alpha) : Bootstrap Modal v4.0