Published May 05, 2020 by RIT

HOW TO DISPLAY MODAL IN BULMA


Assalamualaikum warohmatullohi wabarokatuh.
Wa alaikum salam warohmatullohi wabarokatuh.

Terima kasih telah berkunjung di media pembelajaran bahasa program online langsungkoding.blogspot.com ,

This is post writing only in my blog and my solved problem when building website.
and now, my problem on modal with framework bulma, because in doc web bulma I do not Understand :) hehehe, at last, I Have code from stackoverflow and google, this is above code :


?
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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<button class="button is-success has-background-primary" id="open_modal"> OPEN MY MODAL </button>
 
<div id="myModal584" class ="modal">
  <div class = "modal-background"></div>
  <div class = "modal-content">
    <div class="box has-background-primary">
      <section class="hero">
      <h1 id='jdl_a' class=" title has-text-centered"></h1>
        <div class="hero-body has-background-light ">
          <div class="container">
 
                <form method='post' class="">
                  <div class='hiddden' >
                      <div class="field">
                        <label for="" class="label">Your Name :</label>
                          <input type="text" class="input" >
                          <div id="results" ></div>
                          <input type="hidden" class="input">
                      </div>
                      <div class="field">
                        <label for="" class="label">Your Address :</label>
                          <input type="text" class="input" >
                      </div>
                      <div class="field">
                        <button class="button is-success has-background-danger " id="close_modal">
                          Close
                        </button>
                      </div>
                  </div> 
                </form>
 
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
        $("#open_modal").click(function(e) {
            e.preventDefault();
            $("#myModal").addClass("is-active");
          });
        $("#close_modal").click(function(e) {
            e.preventDefault();
            $("#myModal").removeClass("is-active");
          });
      });
</script>

Thank's
Terima Kasih.

Tag :
Bulma css | Framework css | Modal in bulma| How to open modal in bulma | open modal in bulma | HOW TO DISPLAY MODAL IN BULMA | open modal with jquery | cara membuka modal pada bulma | cara modal pada bulma | cara membuat modal pada bulma


Comments: