Question

我有语义模式的问题，当我点击顺序我会显示模态但模态不能正常工作。点击命令模态后，模态只显示然后自行关闭。

查看代码

        <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>
<script type="text/javascript" src="<?php echo base_url(); ?>packaged/javascript/semantic.js"></script>
<script type="text/javascript">
    $('.order-button').click(function(){
        $('#modaldiv').modal('show');
    });

</script>

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

Answer 1

请确保为“转换”添加相应的JS和CSS文件。和＆＃39;调光器＆＃39;组件，因为它们用于语义模态以及模态＆＃39;组件本身。

Answer 2

它会起作用：

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

Answer 3

我做了一个＆＃34; hack＆＃34;在semantic.js代码（v.1.8.1）中，在第5831行，其中设置了模态设置。而不是

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

我刚才说：

close    : '.close',

这是因为我想在整个应用程序中使用相同的行为。该行的含义是＆＃34;哪些选择器将关闭模态？＆＃34;。

Answer 4

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

如何使用语义模式

4 个答案: