كيف أجعل الموجة route يقوم بالتوجية الي datatarget

محمود سامي7 · 4 ديسمبر 2021

مثلا لدي صفحة عرض تحتوي علي 2 card كل واحده منهم توجة الي موديل معين باستخدام datatarget

لنفس المتحكم لكن صفحات العرض مختلفة

https://getbootstrap.com/docs/4.0/components/modal/

قصدي هنا ان الموجة بدلا من توجية الي صفحة العرض يتم توجيه الي model بنفس المحتوي

							<div class="col-lg-6 mb-4 ">
                            <div class="card bg-info text-white shadow">
                                <a href="{{ route('create_sms')}}" data-target=".bd-example-modal-lg" >
                                    <div class="card-body text-center">
                                            أرسال الرسائل
                                        <div class="text-white-50 small">
                                            <i class="far fa-comment-alt  fa-5x"></i>
                                        </div>
                                    
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-4">
                            <div class="card bg-success text-white shadow">
                                <a href="#">
                                    <div class="card-body text-center">
                                        رسائل التنبية
                                        <div class="text-white-50 small">
                                            <a href="#"><i class="far fa-comments fa-5x "></i></a>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

تم التعديل في 4 ديسمبر 2021 بواسطة محمود سامي حسين

محمد أبو عواد · 4 ديسمبر 2021

يوجد في بوتستراب المكون modal ,وهذا الكود الخاص به

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

تستطيع استبدال العنصر button بالعنصر a واستخدام الخاصية href وتكون قيمتها # , بهذا الشكل

<a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
   ^^^^^^^^
    Launch demo modal
  </a>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <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">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

تستطيع أن تستخدم اثنين من المكون modal وتتحكم في محتوى كل منهم كالتالي

<a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
                                                                                   ^^^^^^^^
    modal 1
</a>

<a href="#" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">
                                                                                   ^^^^^^^^
    modal 2
</a>

لدينا زرين , كل زر مرتبط ب modal معين باستخدام الخاصية data-target , الآن نقوم بإنشاء مكونين modal كل مكون لديه id بنفس اسم data-target الخاص بالزرين , الكود بشكل مختصر كالتالي

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-
                          ^^^^^^^^^^^     
hidden="true">
    
    
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-
                          ^^^^^^^^^^^     
hidden="true">

لاحظ مكونين modal , الأول لديه معرف modal1 والثاني modal2 , عند الضغط على الزر الذي اسمه modal 1 سوف يظهر المكون modal المرتبط به , يمكنك عرض البيانات التي تريدها بداخل المكون modal وذلك بكتابة الكود بداخل جسم المكون modal كما هو واضح في الكود التالي

  <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal 2</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          
          يمكنك كتابة الأكواد التي تريدها هنا وتستخدم أي بيانات قمت بجلبها من المتحكم أو عمل فورم 
          
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

كيف أجعل الموجة route يقوم بالتوجية الي datatarget

السؤال

محمود سامي7

1 جواب على هذا السؤال

Recommended Posts

محمد أبو عواد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية