HTML Code :
<span class="button" onclick="javascript:buttonClicked();">Log In</span>
<div class="modal-bg" style="display: none;">
<div class="modal">
<span>Log In<a href="#close" class="close">×</a></span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Log in</button>
</form>
</div>
</div>
For the Log In button. For the Sign Up:
<span class="button" onclick="javascript:buttonClicked();">Sign Up</span>
<div class="modal-bg" style="display: none;">
<div class="modal">
<span>Sign Up<a href="#close" class="close">×</a></span>
<form>
<input id="FirstName" name="FistName" type="textbox" placeholder="First Name" required>
<input id="LastName" name="LastName" type="textbox" placeholder="Last Name" required>
<input id="email" name="email" type="email" placeholder="Email" required>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<br><input style="margin: 0 -102px 0;" name="sex" type="radio" value="Male" checked="checked">Male
<input style="margin: 0 -105px 0;" name="sex" type="radio" value="Female">Female<br>
Date of Birth<br>
<select name="month" onChange="changeDate(this.options[selectedIndex].value);">
<option value="na">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day" id="day">
<option value="na">Day</option>
</select>
<select name="year" id="year">
<option value="na">Year</option>
</select>
<input id="Address" name="Address" type="textbox" placeholder="Street address">
<button name="submit" id="submit" type="submit">Sign up</button>
</form>
</div>
</div>
**JavaScript Code:
<script>
$('.button').click(function(){
$('.modal').css('display','block');
$('.modal-bg').fadeIn();
});
</script>
<script>
$('.close').click(function(){
$('.modal-bg').fadeOut();
$('.modal').fadeOut();
return false;
});
</script>
<script>function buttonClicked()
{
$('.modal').show();
}
</script>
When the Log In or Sign Up buttons are clicked, a pop-up window will appear. The issue arises when clicking either button as the Sign Up modal appears since it is coded secondly. To fix this problem, you can differentiate between the two classes by modifying the JavaScript code. You may need to adjust the identifiers or add specific classes to distinguish between the first and second modals.