[英]Open Modal in semantic-ui
I just cant figure out how to open this modal. 我只是不知道如何打开此模式。 I usually use Bootstrap, but wanted to try a new layout. 我通常使用Bootstrap,但想尝试新的布局。
Here is the button that I use to open the Modal: 这是我用来打开模态的按钮:
<div class="ui pointing menu">
<a class="item" id="#register">Register</a>
@include('auth.modals')
</div>
Here is my Modal: 这是我的模态:
<div id="register-modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="">
</div>
<div class="description">
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
And Here is my JavaScript: 这是我的JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$(document).ready(function(){
$('#register').click(function(){
$('#register-modal').modal('show');
});
});
</script>
The whole problem is that the element to which you try to attach the click event does not exist. 整个问题是您尝试将click事件附加到的元素不存在。 You have specified id="#register"
, instead of id="register"
您指定了id="#register"
,而不是id="register"
correcting the attribute will do the job: 更正属性将完成以下工作:
<div class="ui pointing menu">
<a class="item" id="register">Register</a>
@include('auth.modals')
</div>
The id of the modal itself seems to be correct, though :) 模态本身的id似乎是正确的,但:)
Such things are very easy to debug, simply type $('#register')
in the console, and you'll see that jquery cannot find any matching element. 这些事情很容易调试,只需在控制台中键入$('#register')
,您就会看到jquery无法找到任何匹配的元素。
Figured it out! 弄清楚了!
I guess the button that you open the modal with has to be a class? 我想您用来打开模态的按钮必须是一个类?
<a class="item register">Register</a>
Then pass in JavaScript like this: 然后像这样传递JavaScript:
<script>
$(document).ready(function(){
$('.register').click(function(){
$('#register-modal').modal('show');
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.