ديفكوم- مربعات حوار Bootstrap 5 Modal التفاصيل

المقالات

مربعات حوار Bootstrap 5 Modal

-

بنتعلم في هذا الدرس شو يعني Bootstrap 5 Modal، وكيف ممكن نعملها في Bootstrap 5. يمكن تعريفها على انها نافذة منبثقة يتم عرضها فوق الشاشة الحالية، يمكن استخدامها على سبيل المثال ل :الاشعارات والتنبيهات user notifications، عرض بسيط في الصفحه lightboxes وهكذا.

نطبق مثال حتى نفهم الموضوع:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
    <div class="container-fluid mt-3"> 
            <h3>Modal sample</h3>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
        </button>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
               <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

النتيجة:

في النتيجة السابقة يمكن اغلاق المربع بالنقر فوق اي مكان في الصفحه.

طيب شو لو كان المطلوب عدم اغلاق المربع عند النقر في اي مكان في الصفحه. يمكن تطبيق هذا الاشي باستخدام Static backdrop

تطبيق Static backdrop

هنا يتم ضبط عند ضبط backdrop على static،الامر الي بيعن ان لن يتم إغلاق المربع عند النقر خارجها.

تمام نطبق مثال حتى نفهم الموضوع:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
    <div class="container-fluid mt-3"> 
            <h3>Modal sample</h3>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
        </button>
        <!-- Modal-->
        <div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false"  tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

النتيجة نفس النتيجة السابقة ما عدا ان لن يتم الاغلاق عند النقر خارج المربع.

الكود المسؤول عن هذا action هو (معلم باللون الاصفر)

data-bs-backdrop="static" data-bs-keyboard="false"

اضافة حركة Add animation

يمكن اضافة تأثير حركة للمربع عن الفتح والاغلاق باستخدام fade class.

الموضوع بسيط جدا. وطبقنا هذا الكود في المثال السابق عن طريق اضافة fade class. وبكون شكل الكود:

<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false"  tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

التحكم بحجم المربع Modal Size

يمكن التحكم بحجم المربع باستخدام

modal-sm class. لعرض مربع بحجم صغير (أقصى عرض 300 بكسل)

modal-lg class لعرض مربع بحجم كبير (اقصى عرض max-width 800px)

modal-xl. لعرض مربع بحجم كبير جدًا (اقصى عرض 1140 بكسل).

modal-fullscreen. لعرض مربع بحجم كامل الشاشة.

الحجم الافتراضي ل Modal هو 500 بكسل كحد أقصى.

نطبق مثال حتى نفهم:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
    <div class="container-fluid mt-3">
        <h3>Modal sample</h3>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModaldef">
            Launch demo default modal
        </button>
        <!-- Modal -->
        <div class="modal fade " id="exampleModaldef" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo small modal
        </button>
        <!-- Modal -->
        <div class="modal fade " id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLg">
            Launch demo larg modal
        </button>
        <!-- Modal -->
        <div class="modal fade " id="exampleModalLg" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalxl">
            Launch demo X-larg modal
        </button>
        <!-- Modal -->
        <div class="modal fade " id="exampleModalxl" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFS">
            Launch demo fullscreen modal
        </button>
        <!-- Modal -->
        <div class="modal fade " id="exampleModalFS" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

طبقنا كل الاحجام في المثال السابق والنتيجة بتكون:

توسيط المربع Centered Modal

لتوسيط المربع بوسط الشاشة عمودي وافقي بنستخدم class باسم modal-dialog-centered.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
    <div class="container-fluid mt-3">
        <h3>Modal sample</h3>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
            Open modal
        </button>
    </div>
    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Modal Heading</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    Modal body..
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

النتيجة:

النتيجة بتكون عرض المربع في وسط الشاشة.

تطبيق شريط التمرير Scrolling Modal

يمكن تطبيق شريط التمرير للمحتوي في modal اذا كان المحتوى كبير، باستخدام class باسم modal-dialog-scrollable

نطبق المثال التالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="height:1500px">
    <div class="container-fluid mt-3">
        <h3>Modal sample</h3>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
            Open modal
        </button>
    </div>
    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Modal Heading</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    كن دائمًا رافع الرأس ولا تحني ظهرك لأي إنسان فما دامت جبهتك في السماء فلا يقدر أحدهم على الصعود لظهرك.
                    أشفق عليك في شبابك حتى تجد من يشفق عليك وأنت رجل كبير.
                    صادق نفسك فهي الوحيدة التي لن تخونك مهما فعلت به ودائمًا ما تدلك على ما بداخلك بكل الصدق وبدون رياء.
                    لو سكتت الأسود عن زئيرها لأقبلك الغربان بنعيقها.
                    الكثير من الشيء يقلل من ثمنه إلا العقل الناضج كلما زادت ثقافته ندر وعلا شأنه.
                    خادم سيدين يكذب على أحدهما.
                    أسد عليَّ وفي الحروب نعامة.
                    آفة الحديث الكذب.
                    كلما ارتفع الشريف تواضع، وكلما ارتفع الحقير تكبر.
                    أن توقد شمعة خيرًا من أن تعيش حياتك وأنت تلعب الظلام.
                    العتاب هدية للأحباب.
                    من احتمل عيوبي أعتبره سيدي ولو كان خادمي.
                    الجزع عند المصيبة مصيبة.
                    من أمنك لا تخونه وإن كنت خوان.
                    <hr />
                    كن دائمًا رافع الرأس ولا تحني ظهرك لأي إنسان فما دامت جبهتك في السماء فلا يقدر أحدهم على الصعود لظهرك.
                    أشفق عليك في شبابك حتى تجد من يشفق عليك وأنت رجل كبير.
                    صادق نفسك فهي الوحيدة التي لن تخونك مهما فعلت به ودائمًا ما تدلك على ما بداخلك بكل الصدق وبدون رياء.
                    لو سكتت الأسود عن زئيرها لأقبلك الغربان بنعيقها.
                    الكثير من الشيء يقلل من ثمنه إلا العقل الناضج كلما زادت ثقافته ندر وعلا شأنه.
                    خادم سيدين يكذب على أحدهما.
                    أسد عليَّ وفي الحروب نعامة.
                    آفة الحديث الكذب.
                    كلما ارتفع الشريف تواضع، وكلما ارتفع الحقير تكبر.
                    أن توقد شمعة خيرًا من أن تعيش حياتك وأنت تلعب الظلام.
                    العتاب هدية للأحباب.
                    من احتمل عيوبي أعتبره سيدي ولو كان خادمي.
                    الجزع عند المصيبة مصيبة.
                    من أمنك لا تخونه وإن كنت خوان.
                    <hr />
                    كن دائمًا رافع الرأس ولا تحني ظهرك لأي إنسان فما دامت جبهتك في السماء فلا يقدر أحدهم على الصعود لظهرك.
                    أشفق عليك في شبابك حتى تجد من يشفق عليك وأنت رجل كبير.
                    صادق نفسك فهي الوحيدة التي لن تخونك مهما فعلت به ودائمًا ما تدلك على ما بداخلك بكل الصدق وبدون رياء.
                    لو سكتت الأسود عن زئيرها لأقبلك الغربان بنعيقها.
                    الكثير من الشيء يقلل من ثمنه إلا العقل الناضج كلما زادت ثقافته ندر وعلا شأنه.
                    خادم سيدين يكذب على أحدهما.
                    أسد عليَّ وفي الحروب نعامة.
                    آفة الحديث الكذب.
                    كلما ارتفع الشريف تواضع، وكلما ارتفع الحقير تكبر.
                    أن توقد شمعة خيرًا من أن تعيش حياتك وأنت تلعب الظلام.
                    العتاب هدية للأحباب.
                    من احتمل عيوبي أعتبره سيدي ولو كان خادمي.
                    الجزع عند المصيبة مصيبة.
                    من أمنك لا تخونه وإن كنت خوان.
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

النتيجة:

طبعا اكيد يمكن اضافة اي شي داخل هاذ modal

اترك تعليقك

الاسم الكامل

البريد الإلكتروني

اضافة تعليق

حفظ