Published June 10, 2020 by RIT with 0 comment

CARA MENAMPILKAN GAMBAR KE MODAL DENGAN JQUERY

Assalamualaikum warohmatullohi wabarokatuh,
Wa alaikum salam warohmatullohi wabarokatuh,

cara menampilkan gambar ke modal dengan jquery

Tampilan awal


Tampilan setelah menekan tombol nya

di episode ini langsungkoding.blogspot.com akan berbagi cara menampilkan gambar ke modal dengan jquery, disini langsungkoding.blogspot.com menggunakan bootstrap framework css, dan library jquery. langsung saja kode nya di bawah ini, tinggal copypaste  



?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
    <title> parse gambar</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
 
   <body>
 
      <p>tekan gambar atau tombol untuk menampilkan gambar ke modal</p>
      <a class="btn btn-warning" id="tombol_klik" data-toggle="modal" data-target="#modalGambar" data-gmbr='user-langsungkoding.blogspot.com.png'>klik saya</a>
      <br><br>
      <img src="user-langsungkoding.blogspot.com.png" width="100px">
 
   </body>
 
</html>
 
<!-- modal -->
<div class="modal fade" id="modalGambar" role="dialog">
  <div class="modal-dialog">
 
    <form method="post" action="change-goal">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Menampilkan gambar ke modal</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <img id="parse-src">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- end modal -->
 
<script>
 $(document).ready(function() {
    $("#tombol_klik").click(function(e) {
       e.preventDefault();
       var gmbr = $(this).attr('data-gmbr');
        
       $('#parse-src').attr('src',gmbr);
       $('#parse-src').attr('width','100px');
 
       $("#modalGambar").modal();
    });
 });
 
</script>

Terima Kasih
Thank's

TAG TAGS :
cara menampilkan gambar ke modal | cara oper nilai img ke modal | how to add atribut src with jquery | how to parse img to modal bootstrap | bootstrap | jquery


BACA JUGA :


,

      edit

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)