0

我对语义 ui 模态有问题，当我单击订单时，我会显示模态，但模态无法正常工作。单击订单模式后，模式刚刚显示然后自行关闭。

查看代码

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

你能帮我解决这个问题吗？谢谢你。

4

4 回答 4

4

确保为“transition”和“dimmer”组件添加相应的 JS 和 CSS 文件，因为它们用于语义模态以及“模态”组件本身。

于 2015-06-10T16:27:36.483 回答
0

我在semantic.js 代码（v.1.8.1）中做了一个“hack”，在第5831 行，其中设置了模态设置。代替

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

我只是说：

close    : '.close',

这是因为我希望整个应用程序具有相同的行为。该行的含义是“哪些选择器将关闭模式？”。

于 2015-02-12T16:30:37.837 回答
0

它会工作：

$('#btn').click(function(){
  //do something
  this.preventDefault();
});
于 2014-07-22T11:11:52.907 回答
0

我曾经遇到过同样的问题，但是通过单击在<a>元素中打开模式，解决方案是完全删除属性href。在这种情况下，可能与submit按钮上的事件有关。

于 2017-05-29T03:24:18.777 回答