1
我沒有在我上一篇文章中解釋我的問題。如何添加第二個模態到我的html頁面
所以我想添加第二個模態到我的html頁面，所以如果你點擊「按鈕1」它會打開「模態1」，如果你點擊「按鈕2」它將打開「模態2」，然而「按鈕3「」按鈕4「」按鈕5「和」按鈕6「打開」模式2「。當我創建第二個模式並設置下面的JavaScript。它將保持鍵上的兩個開口的模態2和按鈕不是模態11.
還要注意，第一按鈕的ID「自由」
還要注意，第二個按鈕「的ID 「當按鈕1被設定爲 」MOD1天「
<script>
// Get the modal1
var modal = document.getElementById('myModal1');
// Get the button that opens the modal
var btn = document.getElementById("free");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal2
var modal = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("oneday");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>兩個按鈕一直打開」 Modal2 AL1" HTML下面
按鈕1
<!-- service item -->
<div class="col-md-4 wow fadeInLeft" data-wow-duration="500ms">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-snowflake-o fa-2x"></i>
</div>
<div class="service-desc">
<button id="free">
<h3>5 Day Free Trial</h3>
</button>
<b><p>So you can get a taste of the action for free, we will give new users a 5 day trial to see how they like our bot before they buy!</p> </b>
</div>
</div>
</div>
<!-- end service item -->按鈕2
<!-- service item -->
<div class="col-md-4 wow fadeInUp" data-wow-duration="500ms" data-wow-delay="500ms">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-clock-o fa-2x"></i>
</div>
<div class="service-desc">
<button id="oneday">
<h3>1 Day</h3>
</button>
<b><p>$0.74 -24 Hours </p> </b>
</div>
</div>
</div>
<!-- end service item -->
而情態動詞在這裏
Modal1
<!-- Modal1 -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<form name="getinfo" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
<div class="form-style-8">
<span class="close">×</span>
<label for="msg">E-mail:</label>
<input type="email" id="mail" name="email" />
</div>
<div>
<label for="msg">Username:</label>
<br>
<input id="user" name="username">
</textarea>
</div>
<div>
<label for="msg">Password:</label>
<br>
<input type="password" id="pass" name="password">
</textarea>
</div>
<div>
<label for="msg">Confirm Password:</label>
<br>
<input type="password" id="pass" name="cpassword">
</textarea>
</div>
<div>
<label for="msg">3 Hashtags:</label>
<br>
<input id="tags" name="hashtags">
</textarea>
</div>
<div>
<input id="submit" type="submit" name="submit" value="submit">
</div>
</form>
</div>
</div>Modal2
<!-- Modal2 content -->
<div class="modal-content">
<form name="getinfo2" onsubmit="return validateForm()" action="php/gmail.php" method="POST">
<div class="form-style-8">
<span class="close">×</span>
<label for="msg">Example:</label>
<input type="email" id="e1" name="email" />
</div>
<div>
<label for="msg">Example2:</label>
<br>
<input id="e2" name="username">
</textarea>
</div>
<div>
<label for="msg">Example3:</label>
<br>
<input type="password" id="e3" name="password">
</textarea>
</div>
<div>
<label for="msg">Example4:</label>
<br>
<input type="password" id="e4" name="cpassword">
</textarea>
</div>
<div>
<label for="msg">Example5:</label>
<br>
<input id="e5" name="hashtags">
</textarea>
</div>
<div>
<input id="submit" type="submit" name="submit" value="submit">
</div>
</form>
</div>
</div>，所以我問我如何才能modal1只與對接工作on1和modal2與我將在稍後創建的按鈕2,3,4,5和6一起工作。
看來你是使用CSS bootsrap，你不使用bootsrap.js？如果你是你不需要手動隱藏/顯示模態，並可以使用他們的API他們 – charlietfl
我使用的是bootsrap.js但是我是新的HTML編碼，所以我不知道很多關於它 –
使用不同的變量來存儲參考模態。 –