اذهب إلى المحتوى
  • 0

عدم ظهور المكون modal في بوتستراب 5

ابراهيم حمدى2

بواسطة ابراهيم حمدى2

 مشاركة

السؤال

ابراهيم حمدى2 عضو نشيط

ابراهيم حمدى2

نشر
نشر

قمت بمراجعة الكود اكثر من مرة ولكن لا يعمل

لا يظهر modal box رغم عدم ظهور اى اخطاء فى console

Code html 

        <div class="container">
          <div class="row">
              <div class="row">
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <a class="thumbnail" href="#" data-image-id="image-gallery-image" data-toggle="modal" data-title="egypt-1"
                         data-image="./images/EGYPT-G1.jpg"
                         data-target="#image-gallery">
                         <img class="img-thumbnail"
                               src="./images/EGYPT-G1.jpg"
                               alt="Another alt text">
                              </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-2"
                    data-image="./images/EGYPT-G2.jpg"
                    data-target="#image-gallery">
                    <img class="img-thumbnail"
                    src="./images/EGYPT-G2.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-3"
                         data-image="./images/EGYPT-G3.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G3.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-4"
                         data-image="./images/EGYPT-G4.jpg"
                         data-target="#image-gallery">
                         <img class="img-thumbnail"
                               src="./images/EGYPT-G4.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-5"
                         data-image="./images/EGYPT-G5.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                          src="./images/EGYPT-G5.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-6"
                         data-image="./images/EGYPT-G6.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G6.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-7"
                         data-image="./images/EGYPT-G7.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G7.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-8"
                          data-image="./images/EGYPT-G8.jpg"
                          data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G8.jpg" 
                               alt="Another alt text">
                      </a>
                  </div>
              </div>            

              <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h4 class="modal-title" id="image-gallery-title"></h4>
                              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              <img id="image-gallery-image" class="img-responsive col-md-12">
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                              </button>
      
                              <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                              </button>
                          </div>
                      </div>
                  </div>
              </div>

 

Code JS 

$(function() {
    // Gallery Tours

    let modalId = $('#image-gallery');


    loadGallery(true, 'a.thumbnail');

    //This function disables buttons when needed
    function disableButtons(counter_max, counter_current) {

        $('#show-previous-image, #show-next-image').show();

        if (counter_max === counter_current) {

            $('#show-next-image').hide();

        } else if (counter_current === 1) {

            $('#show-previous-image').hide();

        }
    }

    /**
     *
     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
     * @param setClickAttr  Sets the attribute for the click handler.
     */

    function loadGallery(setIDs, setClickAttr) {
        let current_image,
            selector,
            counter = 0;

        $('#show-next-image, #show-previous-image').on('click',function () {
            if ($(this).attr('id') === 'show-previous-image') {
                current_image--;
            } else {
                current_image++;
            }

            selector = $('[data-image-id="' + current_image + '"]');

            updateGallery(selector);
        });

        function updateGallery(selector) {
            let $sel = selector;
            current_image = $sel.data('image-id');
            $('#image-gallery-title').text($sel.data('title'));

            $('#image-gallery-image').attr('src', $sel.data('image'));

            disableButtons(counter, $sel.data('image-id'));
        }

        if (setIDs == true) {
            $('[data-image-id]').each(function () {
                counter++;
                $(this).attr('data-image-id', counter);
            });
        }
        $(setClickAttr)
            .on('click', function () {
            updateGallery($(this));
        });
    }
});

Code SCSS 

  #image-gallery {
        .modal-footer{
            display: block;
        }
    }
    .thumb{
        margin-top: 15px;
        margin-bottom: 15px;
    }

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

7 أجوبة على هذا السؤال

Recommended Posts

  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ الآن قال ابراهيم حمدى:

إصدار bootstrap 5.1.3 

تم التعديل بالاعلى

حسنا في الاصدار الخامس من بوتستراب يجب أن تغير الخصائص data-toggle و data-target و data-dismiss الى التالي 

data-bs-dismiss
data-bs-toggle
data-bs-target

ثم جرب الامر وأخبرنا بالنتيجة

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر

تأكد أن الخاصية data-target في الزر الخاص بالمودل له نفس قيمة الخاصية id للمودل , لاحظ 

<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">
                        ^^^^^^^^^^^^^^^^

تأكد أنك نسخت الكود الخاص بالمكون مودل التابع للاصدار الذي تعمل عليه ,لو كنت تعمل على الاصدار الرابع من بوتستراب فتأكد أنك تستخدم المكون الخاص بالاصدار الرابع , وبالمثل للاصدار الخامس , تأكد انك تضمن ملف jquery و Popper.js اذا كنت تستخدم الاصدار الرابع من بوتستراب 

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
ابراهيم حمدى2 عضو نشيط

ابراهيم حمدى2

نشر
  • الكاتب
نشر
بتاريخ 40 دقائق مضت قال محمد أبو عواد:

تأكد أن الخاصية data-target في الزر الخاص بالمودل له نفس قيمة الخاصية id للمودل , لاحظ 


<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">
                        ^^^^^^^^^^^^^^^^

تأكد أنك نسخت الكود الخاص بالمكون مودل التابع للاصدار الذي تعمل عليه ,لو كنت تعمل على الاصدار الرابع من بوتستراب فتأكد أنك تستخدم المكون الخاص بالاصدار الرابع , وبالمثل للاصدار الخامس , تأكد انك تضمن ملف jquery و Popper.js اذا كنت تستخدم الاصدار الرابع من بوتستراب 


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

 

انا اعمل على webpack ولا يوجد اى اخطاء تظهر حتى jquery  يعمل ويظهر ids فى مكانه ومع ذلك لا يظهر modalCapture.thumb.PNG.8f1e268b7c10a405edf1a7c0f1874b65.PNG

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ 56 دقائق مضت قال ابراهيم حمدى:

انا اعمل على webpack ولا يوجد اى اخطاء تظهر حتى jquery  يعمل ويظهر ids فى مكانه ومع ذلك لا يظهر moda

هل يمكنك ارفاق الكود الخاص بملف package.json  لكي نتأكد من اصدار حزمة بوتستراب لديك؟

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
ابراهيم حمدى2 عضو نشيط

ابراهيم حمدى2

نشر
  • الكاتب
نشر (معدل)
بتاريخ 2 دقائق مضت قال محمد أبو عواد:

هل يمكنك ارفاق الكود الخاص بملف package.json  لكي نتأكد من اصدار حزمة بوتستراب لديك؟ 

{
  "name": "safarnysite",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "dist": "webpack serve --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "bootstrap": "^5.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^5.5.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^2.6.0",
    "popper.js": "^1.16.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/IBRHMHMDY/SafarnySite.git"
  },
  "bugs": {
    "url": "https://github.com/IBRHMHMDY/SafarnySite/issues"
  },
  "homepage": "https://github.com/IBRHMHMDY/SafarnySite#readme",
  "description": ""
}

 

تم التعديل في بواسطة ابراهيم حمدى
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمد أبو عواد عضو نشيط

محمد أبو عواد

نشر
نشر
بتاريخ الآن قال ابراهيم حمدى:

 

package.json

لا نرفق الملفات في الاسئلة العامة , أرجو منك ارفاق الكود فقط , أي أن تقوم بنسخ الكود من الملف ولصقه هنا في محرر الأكواد

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...