تغيير حجم نافذة Bootstrap Modal

To resize the Bootstrap modal window to open in a smaller size instead of full screen when clicking on a package, you can modify the CSS of the modal dialog.

First, ensure you have a way to target the specific modal you want to resize. If the modal is opened via JavaScript, you can add a class to the modal dialog when it is opened and then use that class to style the modal.

Here’s an example of how you can resize a Bootstrap modal window to open in a smaller size:

htmlCopy code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
button>


<div class="modal fade" id="exampleModal" 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 titleh5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×span>
        button>
      div>
      <div class="modal-body">
        ...
      div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
        <button type="button" class="btn btn-primary">Save changesbutton>
      div>
    div>
  div>
div>

<style>
  .modal-sm {
    max-width: 500px !important;
  }
style>

<script>
  $('#exampleModal').on('show.bs.modal', function (e) {
    $(this).find('.modal-dialog').addClass('modal-sm');
  });

  $('#exampleModal').on('hide.bs.modal', function (e) {
    $(this).find('.modal-dialog').removeClass('modal-sm');
  });
script>

In this example, the modal is set to open in a smaller size using the modal-sm class. You can adjust the max-width property in the CSS to control the size of the modal window. You can also add this CSS class dynamically when opening the modal using JavaScript, as shown in the script tag.

لتغيير حجم نافذة العرض المستخدمة في Bootstrap Modal، يمكنك استخدام بعض القواعد في CSS لتحديد الحجم المطلوب. يمكنك تحديد عرض النافذة وارتفاعها باستخدام القاعدة max-width و max-height على التوالي.

هناك طريقتين للقيام بذلك، يمكنك إما تطبيق الأسلوب المباشر في علامة style داخل العنصر div الخاص بالمودال، أو يمكنك إضافة قواعد CSS إضافية في ملف CSS الخاص بك.

إذا كنت ترغب في تغيير حجم النافذة المستخدمة عند فتح المودال مباشرة، يمكنك استخدام الحدث show.bs.modal و hide.bs.modal لتغيير الحجم بشكل ديناميكي. على سبيل المثال، يمكنك استخدام الكود التالي:

htmlCopy code
<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 titleh5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×span>
        button>
      div>
      <div class="modal-body">
        ...
      div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
        <button type="button" class="btn btn-primary">Save changesbutton>
      div>
    div>
  div>
div>

<script>
  $('#exampleModal').on('show.bs.modal', function (e) {
    $(this).find('.modal-dialog').css({
      'max-width': '50%',
      'max-height': '80%'
    });
  });

  $('#exampleModal').on('hide.bs.modal', function (e) {
    $(this).find('.modal-dialog').css({
      'max-width': '',
      'max-height': ''
    });
  });
script>

في هذا المثال، يتم تحديد حجم النافذة بنسبة مئوية من حجم الشاشة باستخدام قيم max-width و max-height. يمكنك تعديل هذه القيم وفقًا لاحتياجات تصميمك.