打开一个模式，在页面加载时禁用另一个模式
打开一个模式，在页面加载时禁用另一个模式
提问于 2018-10-04 19:10:05
我陷入了一个很小但很奇怪的问题。我的页面上有两个模态，我想在页面加载时加载第一个模态，我已经完成了单击按钮并打开模态的代码，但这两个模态都出现了。它有一个从左到右打开的效果，我想保留这个效果，所以我在jquery代码中添加了这个类。我只想加载具有id="ModalLogin“的模式。正如你所看到的，当点击按钮时，两个模态都会加载。下面是代码片段。请帮帮忙。
$('.btn').click(function() {
$('.modal')
.prop('class', 'modal fade') // revert to default
.addClass($(this).data('direction'));
$('.modal').modal('show');
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://www.topconsumerreviews.com/new-common-code/new-style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<ul class="product-rankings-font" style="list-style: none;padding-left: 18px;padding-bottom: 10px;padding: 10px;">
<li>Select2 </li>
<!-- <li><a href="#modal" class="btn go">Activate Modal</a></li> -->
<li style="text-align: center;padding-top: 5px;"><a class='btn btn-primary btn clos' style="width: 160px;" id="bty" data-direction='left'>bty</a></li>
</ul>
<!---- Forgot Password Popup --->
<div class="modal fade" id="ModalForgotPassword" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slider 2</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<button class="btn btn-primary">Option 4</button>
</div>
<div class="form-group">
<button class="btn btn-primary">Option 5</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!---- Forgot Password Popup --->
<!---- Login Popup --->
<div class="modal fade" id="ModalLogin" role="dialog">
<div class="modal-dialog" style="width: 15%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="font-size: 18px;text-align: center;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">Text Sample 1</h4>
<h4 class="modal-title" style="color: black;">Text Sample 2</h4>
</div>
<div class="modal-body" style="font-size: 16px">
<form action="comparelist.php" method="post">
<ul id="answers-type1" class="myclass" style="list-style: none;padding-right: 10px;padding-left: 10px;">
<li class="module form-check-label" style="background: #668693;" value="Listol" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"><span>Option 1</span></li>
<li class="module form-check-label" style="background: #668693;"><span><a href="page2.html">Option 2</a></span></li>
</ul>
</div>
</div>
</div>
</div>
<!---- Login Popup --->
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-10-04 19:25:28
我想提供另一种使用情态的方式:纯CSS。
下面是参考：click here
这个想法是你不需要任何js，每个模式都会在一个带有id的div包装器中。如下所示：
<div id="modalWrapper">然后你会在你想要的任何地方都有一个超链接
<a href="#modalWrapper">使用CSS的诀窍是-最初将模式的位置设置为绝对和不可见(左：-999em)，然后使用目标选择器，将模式置于中心：
#modalWrapper:target {
left:0;
transition:etc..
}当你这样做的时候，你只需要用按钮打开你想要的模式。
希望这篇文章能对你有所帮助。我对此的第一个回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52653604
复制
相似问题
IE7分区创建表
Jenkins-量角器集成-Centos7 7
Windows 7中的量角器
单击事件隐藏2分量角4
角度7量角器非角度LoginPage
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
