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

محمود سامي حسين · 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

السؤال

محمود سامي حسين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

محمد أبو عواد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية