CODEWITHSUNDEEP
javascriptjquerysemantic-ui
user3040066
user3040066

Reputation: 11

how to use semantic-ui modal

I have problem with semantic-ui modal, when I click order, I would show modal, but modal is not working well. After I click order modal, the modal just showed and then closed by itself.

view code

<div class = "ui form grid_6 omega">
  <form target="paypal" method="post">
    <div class="field1">
      <div class="field">
        <label>Nama</label>
        <input placeholder="Nama" name="nama" type="text">
      </div>
      <div class="field">
        <label>No. HP</label>
        <input placeholder="No. HP" name="handphone" type="text">
      </div>
      <div class="field">
        <label>Alamat</label>
        <input placeholder="alamat" name="alamat" type="text">
      </div>
      <div class="field">
        <label>Jumlah</label>
        <div class="selectbox">
          <select name="jumlah" id="">
            <?php for ($i=1; $i <= 20; $i++): ?>
            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
            <?php endfor; ?>
          </select>
        </div>
      </div>
      <button type="submit" name="submit" class="ui teal button order-button">Order now</button>
    </div>
  </form>
</div>
<div id="modaldiv" class="ui small modal">
  <i class="close icon"></i>
  <div class="header">
    Smalls Like Bakin
  </div>
  <div class="content">
    <p>Thank you for your order</p>
  </div>
  <div class="actions">
    <div class="ui positive right labeled icon button">
      <a class="text-white" href="<?php echo site_url('home/order');?>">Back to Home</a>
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>

script modal

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />

<script type="text/javascript" src = "<?php echo base_url(); ?>packaged/javascript/semantic.js" />

<script type = "text/javascript" >
  $('.order-button').click(function () {
    $('#modaldiv').modal('show');
  });
</script>

Can you help me to solve this problem? thank you.

Upvotes: 0

Views: 20647

Answers (4)

Edwin Vargas
Edwin Vargas

Reputation: 1227

I used to have the same problem but with click to open the modal in <a> elements, the solution was remove completely the attribute href. In this case maybe is related to submit event on the button.

Upvotes: 0

DruidKuma
DruidKuma

Reputation: 2480

Be sure to add the corresponding JS and CSS files for 'transition' and 'dimmer' components, as they are used in Semantic modals as well as the 'modal' component itself.

Upvotes: 4

Gabriele Pala
Gabriele Pala

Reputation: 94

I did a "hack" in the semantic.js code (v. 1.8.1), at line 5831, where modal settings are set. Instead of

close    : '.close, .actions .button',

I just put:

close    : '.close',

This is because I wanted the same behaviour on the whole application. The meaning of that line is "which selectors will close the modal?".

Upvotes: 0

Baya
Baya

Reputation: 320

it will work :

$('#btn').click(function(){
  //do something
  this.preventDefault();
});

Upvotes: 0

Related Questions