javascript 如何使用semantic-ui modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20513931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use semantic-ui modal
提问by user3040066
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.
我在语义 ui 模态方面有问题，当我点击订单时，我会显示模态，但模态无法正常工作。在我点击订单模态后，模态刚刚显示，然后自行关闭。
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.
你能帮我解决这个问题吗？谢谢。
回答by DruidKuma
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.
请务必为“transition”和“dimmer”组件添加相应的 JS 和 CSS 文件，因为它们用于语义模态以及“模态”组件本身。
回答by Edwin Vargas
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 submitevent on the button.
我曾经遇到过同样的问题，但是通过单击打开<a>元素中的模式，解决方案是完全删除属性href。在这种情况下，可能与submit按钮上的事件有关。
回答by Baya
it will work :
它会起作用：
$('#btn').click(function(){
//do something
this.preventDefault();
});
回答by Gabriele Pala
I did a "hack" in the semantic.js code (v. 1.8.1), at line 5831, where modal settings are set. Instead of
我在 Semantic.js 代码（v. 1.8.1）的第 5831 行做了一个“hack”，其中设置了模态设置。代替
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?".
这是因为我希望在整个应用程序上具有相同的行为。该行的含义是“哪些选择器将关闭模式？”。
