skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Bug modal effect

selamat siang ane mengalami masalah bug pada modal bootstrap, pas modal bootstrap nya ke buka, effect modal nya tidak setabil, jadi ada error muncul di console ini penampakannya..

  <!--/MODAL -->

  <div class="md-modal md-effect-1 md-white colorize-overlay" id="modal-3">
    <div class="md-content">
      <h3>Deskription</h3>
      <div>
        <div class="modal-body" style="height:250px; overflow-y:auto; overflow-x:auto;" id="fetched-data" ></div>
        <!-- Default unchecked -->
        <div class="tile-widget bg-transparent-black-3 " style="padding:5px;">
          <!-- Default checked -->
          <div class="custom-control custom-radio">
           <input type="radio" class="custom-control-input" id="defaultChecked" name="defaultExampleRadios" style=" margin-left:11px; margin-top:10px;">
           <label class="custom-control-label" for="defaultUnchecked" style=" font-size:14px;" >Wait</label>

           <input type="radio" class="custom-control-input" id="defaultUnchecked" name="defaultExampleRadios" style=" margin-left:11spx; margin-top:10px;">
           <label class="custom-control-label" for=" defaultChecked" style="font-size:14px; ">Acc</label>

           <button class=" btn btn-default" style="margin-right:5px; margin-top:-32px;  ">Save</button>
         </div></div>
       </div>
       <div class="modal-footer">

        <button class="md-close btn btn-default">Close me!</button>
      </div>
    </div>
  </div>
</div>

ini ajax nya

<script type="text/javascript">
   $(document).ready(function(){
        $('.md-trigger').click(function () {
            var getDetail = $(this).attr('ci_id');

            //menggunakan fungsi ajax untuk pengambilan data
            $.ajax({
		url : 'detail.php',
                type : 'post',
                data :  'getDetail='+ getDetail,
                success : function(data){
                $('#fetched-data').html(data);//menampilkan data ke dalam modal

                }
            });
         });
    });
  </script>

php ajax
avatar Obbytokun
@Obbytokun

186 Kontribusi 16 Poin

Diperbarui 5 tahun yang lalu

2 Jawaban:

coba tag &lt;/div&gt; paling terakhir di hapus gan..

kurang lebih jadi seperti ini

<pre> &lt;!--/MODAL --&gt;

&lt;div class="md-modal md-effect-1 md-white colorize-overlay" id="modal-3"&gt; &lt;div class="md-content"&gt; &lt;h3&gt;Deskription&lt;/h3&gt; &lt;div&gt; &lt;div class="modal-body" style="height:250px; overflow-y:auto; overflow-x:auto;" id="fetched-data" &gt;&lt;/div&gt; &lt;!-- Default unchecked --&gt; &lt;div class="tile-widget bg-transparent-black-3 " style="padding:5px;"&gt; &lt;!-- Default checked --&gt; &lt;div class="custom-control custom-radio"&gt; &lt;input type="radio" class="custom-control-input" id="defaultChecked" name="defaultExampleRadios" style=" margin-left:11px; margin-top:10px;"&gt; &lt;label class="custom-control-label" for="defaultUnchecked" style=" font-size:14px;" &gt;Wait&lt;/label&gt;

       &amp;lt;input type=&quot;radio&quot; class=&quot;custom-control-input&quot; id=&quot;defaultUnchecked&quot; name=&quot;defaultExampleRadios&quot; style=&quot; margin-left:11spx; margin-top:10px;&quot;&amp;gt;
       &amp;lt;label class=&quot;custom-control-label&quot; for=&quot; defaultChecked&quot; style=&quot;font-size:14px; &quot;&amp;gt;Acc&amp;lt;/label&amp;gt;

       &amp;lt;button class=&quot; btn btn-default&quot; style=&quot;margin-right:5px; margin-top:-32px;  &quot;&amp;gt;Save&amp;lt;/button&amp;gt;
     &amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;		
   &amp;lt;/div&amp;gt;
   &amp;lt;div class=&quot;modal-footer&quot;&amp;gt;
     
    &amp;lt;button class=&quot;md-close btn btn-default&quot;&amp;gt;Close me!&amp;lt;/button&amp;gt;
  &amp;lt;/div&amp;gt;        
&amp;lt;/div&amp;gt;

&lt;/div&gt; </pre>

ane gak tau agan pake plugin tambahan apa, tapi idealnya untuk modal scriptnya seperti ini:

<pre> &lt;div class="modal" tabindex="-1" role="dialog"&gt; &lt;div class="modal-dialog" role="document"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;h5 class="modal-title"&gt;Modal title&lt;/h5&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt; &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;Modal body text goes here.&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt; &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </pre> Source: <a href=' https://getbootstrap.com/docs/4.0/components/modal/ '>Bootstraps Official</a>

avatar bows
@bows

4 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

Tanggapan

modal malah ga keluar gan, soal nya class modal nya bentrok., yg modal fade sama modal effect

jawaban sudah di update gan...

pakek modal biasa sudah saya coba gan lancara kalo di browser firefox tapi di browser chrome modal ga bisa di close

saya baru memahami, ketika saya hapus ajax pemanggilan data nya bug modal nya hilang ..

jadi masalah nya ada di ajax nya gan tapi belum menemukan solusi

masalah sudah selesai gan terimaksih, masalah nya di detail.php saya malah masukan link css nya jadi bentrok....

avatar Obbytokun
@Obbytokun

186 Kontribusi 16 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban