多模态语义ui
多模态语义ui
提问于 2018-01-24 19:25:56
我需要帮助用语义ui来解决我的模态问题。已经搜索了很多资源，但没有运气。这是我的html：
$(document).ready(function() {
$('.coupled.modal').modal({allowMultiple: false});
$('.login.modal').modal('attach events', '#login', 'show');
$('.signup.modal').modal('attach events', '#signup', 'show');
$('.forgot.modal').modal('attach events', '#forgot', 'show');
});<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<div class="ui center aligned container">
<div class="ui buttons">
<button id="login" class="ui button">Login</button>
<div class="or"></div>
<button id="signup" class="ui positive button">Signup</button>
</div>
</div>
<div class="ui tiny login coupled modal">
<div class="description">
<div class="ui header">login</div>
<p><a id="signup" href="#">Signup</a></p></p>
<p><a id="forgot" href="#">Forgot</a></p>
</div>
</div>
<div class="ui tiny signup coupled modal">
<div class="description">
<div class="ui header">Signup</div>
<p><a id="login" href="#">Login</a></p></p>
<p><a id="forgot" href="#">Forgot</a></p>
</div>
</div>
<div class="ui tiny forgot coupled modal">
<div class="description">
<div class="ui header">Forgot</div>
<p><a id="signup" href="#">Signup</a></p></p>
<p><a id="login" href="#">Login</a></p>
</div>
</div>
如果我点击我的模式或按钮上的注册链接，我可以看到注册模式，或者如果我点击任何模式上的登录链接，我也可以在忘记链接上看到登录模式。谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-28 02:08:07
这里的主要问题是，您有多个具有相同id的元素。根据HTML规范 (重点雷)：
当在元素上指定时，id属性值必须在元素的树中的所有id中是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。
最简单的解决方案是将signup、login和forgot转换为类：
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<div class="ui center aligned container">
<div class="ui buttons">
<button class="ui button login">Login</button>
<div class="or"></div>
<button class="ui positive button signup">Signup</button>
</div>
</div>
<div class="ui tiny login coupled modal">
<div class="description">
<div class="ui header">login</div>
<p><a class="signup" href="#">Signup</a></p></p>
<p><a class="forgot" href="#">Forgot</a></p>
</div>
</div>
<div class="ui tiny signup coupled modal">
<div class="description">
<div class="ui header">Signup</div>
<p><a class="login" href="#">Login</a></p></p>
<p><a class="forgot" href="#">Forgot</a></p>
</div>
</div>
<div class="ui tiny forgot coupled modal">
<div class="description">
<div class="ui header">Forgot</div>
<p><a class="signup" href="#">Signup</a></p></p>
<p><a class="login" href="#">Login</a></p>
</div>
</div>在JavaScript代码中，您需要一个不同的选择器(即.login，而不是#login)。您还需要看到show refresh而不是show作为事件的触发--这将确保如果已经显示了模式，就会刷新它(例如，如果您从“登录”转到“忘记”，然后返回到“登录”)。
$(document).ready(function() {
$('.coupled.modal').modal({allowMultiple: false});
$('.login.modal').modal('attach events', '.login', 'show refresh');
$('.signup.modal').modal('attach events', '.signup', 'show refresh');
$('.forgot.modal').modal('attach events', '.forgot', 'show refresh');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48430183
复制相关文章
相似问题
腾讯云开发者
