v2.5.2
Giriş yap

Popup' ı <button> yerine <a> etiketine tıklayınca çıkmasını nasıl yaparım.

bukr3j
528 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 8 
<div class=container>
    <h1>Play YouTube or Vimeo Videos in Bootstrap 4 Modal</h1>
    <button type=button class="video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/Jfrjeg26Cwk data-target=#myModal>
        Play Video 1 - autoplay
    </button>
    <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/IP7uGKgJL8U data-target=#myModal>
        Play Video 2
    </button>
    <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/A-twOC3W558 data-target=#myModal>
        Play Video 3
    </button>
    <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src="https://player.vimeo.com/video/58385453?badge=0" data-target=#myModal>
        Play Vimeo Video
    </button>
    <div class="modal fade" id=myModal tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
        <div class=modal-dialog role=document>
            <div class=modal-content>
                <div class=modal-body>
                    <button type=button class=close data-dismiss=modal aria-label=Close>
                      <span aria-hidden=true>&times;</span>
                    </button>
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class=embed-responsive-item src="" id=video allowscriptaccess=always allow=autoplay></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap 4 kullanılarak yapılan bir popup. Butonlara basınca video çıkıyor. "X" tuşuna yada videonun olmadığı herhangi bir yere basıldığında ise popup gidiyor.
Javascript Kodu:

$(document).ready(function() {
    var n;
    $(".video-btn").click(function() {
        n = $(this).data("src")
    }), console.log(n), $("#myModal").on("shown.bs.modal", function(o) {
        $("#video").attr("src", n + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0")
    }), $("#myModal").on("hide.bs.modal", function(o) {
        $("#video").attr("src", n)
    })
})

ul li içerisine bir Youtube iconuna link ekleyerek çıkartmak istiyorum. Buton yerine a etiketini kullanıp link ile çıkartmak istiyorum. Butonu youtube iconuna çevirebiliyorsam o da olur.

html javascript jquery
Cevap yaz
Cevaplar (8)
bukr3j
1070 gün önce

@desrana Bu link bağlantı linki değil mi? @m100 arkadaşın dediğini yapmam gerekmez mi? Bağlantı gitmemesin diye.

0
#008702
desrana
1072 gün önce
    <a href="" class="show_youtube_popup"><i class="fab fa-youtube"></i></a>

    $(document).on('click', '.show_youtube_popup', function(e){
        e.preventDefault();
        
        //popup çıkarma kodları
    });
1
#008679
bukr3j
1075 gün önce

Hocam. Popup ile video çağırıyorum. Bir tane de değil bazı sayfalarımda 5 tane falan var. Ve sizin verdiğin "javascript:void(0)" kodunu kullandığım zaman 404 hatası veriyor iframe.

0
#008659
m100
1075 gün önce

<a href="nojavascript...void(0)" class="btn btn-primary" data-toggle="modal" data-target="#model">
    Launch demo modal
</a>
  
  <!-- Modal -->
  <div class="modal fade" id="model" tabindex="-1" role="dialog" aria-labelledby="model" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Model</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">Kapat</button>
          <button type="button" class="btn btn-primary">Kaydet</button>
        </div>
      </div>
    </div>
  </div>

sorununu çözer diye düşünüyorum

1
#008657
bukr3j
1075 gün önce

Bu konu hakkında başka bilgisini, fikrini paylaşabilecek yok mu?

0
#008656
bukr3j
1077 gün önce

@m100 Olmuyor knk. 404 veriyor. Yani embed gelmiyor sayfaya.

0
#008649
batuhanal
1080 gün önce
//popun açılmasını saglayan yerden
 (e)=>{
    e.preventDefault();
 }
//yaz çalışması lazim
0
#008629
m100
1080 gün önce

öncelikle a tagının hrefine;

<a href="nojavascript...void(0)" >Giriş Yap</a>

Şeklinde bir href yapmalısın bu etiketin bir yere yönlendirilmemesini sağlayacaktır.
Sonrasında ise etiketin içine data toggle attrlerini yazabilirsin.

1
#008628