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/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.

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./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.

• javascript
• jquery
• semantic-ui

• Check for error message in your debug console. Otherwise, the best is to provide a fiddle so we can help you more efficiently. – TCHdvlp Commented Dec 11, 2013 at 9:26
• What do you mean closed self? – iMom0 Commented Dec 26, 2013 at 8:57
• encounted same as you... – Dickeylth Commented Dec 29, 2014 at 3:07

4 Answers 4

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

it will work :

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

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?".

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