[英]Semantic UI modal not opening
I am using Semantic UI and have created a button with a click
event that should open the modal when clicked on but nothing happens. 我正在使用Semantic UI并创建了一个带有click
事件的按钮,该click
事件应该在单击时打开模态但没有任何反应。
Nothing happens when I click on the link, I don't know what is going wrong. 点击链接时没有任何反应,我不知道出了什么问题。
Here is the button: 这是按钮:
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
JavaScript: JavaScript的:
<script type="text/javascript">
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
</script>
Modal code: 模态代码:
<div id="modaldiv" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
It could be possible that you are binding the event way before the DOM is ready, so instead try with wrapping your code in doc ready: 您可能有可能在DOM准备好之前绑定事件方式,因此请尝试将您的代码包装在doc ready中:
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
Another thing is you can check for errors in browser's console, which can help you understanding the problems. 另一件事是你可以检查浏览器控制台中的错误,这可以帮助你理解问题。
Jai solutions also worked for me. Jai解决方案也为我工作。 I used id instead of classes to select. 我使用id而不是类来选择。
Make sure that you put your jquery
script before semantic 确保在语义之前放置jquery
脚本
<script src="scripts/jquery.js"></script>
<script src="scripts/semantic.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.