我有一个多模态与下一个/上一个按钮。我希望我的模态,以自动打开,只要网页加载。
现在我必须按下"打开模式"按钮,我想删除该按钮。
谢谢你的帮助
1.页面加载后立即打开模态
1.删除"打开模态"按钮
1.模态是多模态的
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function() {
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
<a href="#close" title="Close" class="close">X</a>
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
<a href="#close" title="Close" class="close">X</a>
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
1条答案
按热度按时间kmpatx3s1#
将您的开放模式代码移到一个单独命名的函数中,以便您可以在两个地方使用它
1.在文档就绪函数中直接调用
1.将其注册到单击处理程序