英文:
How can I move signin modal form the right hand (top) of my website
问题
以下是您要翻译的内容：
I have the following problem and to be honest dont know what I am doing wrong.
Recenty I have added a Bootstrap Sign In modal into my html.
;
and
Sign up
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange" onclick="bypassSignUp()"> >Sign up</button>
</div>
</div>
;
When I have added it, I put it at the buttom of my html (It was suppose to be part of the navn bar)
And this is how it looks in the html
When I click on it I see the Sign Up form, as expected:
This is the whole html:
Sign up
I have the following problem and to be honest dont know what I am doing wrong.
Recenty I have added a Bootstrap Sign In modal into my html.
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalRegisterForm">SIGN IN</a>
</div>
and
<!-- Sign In Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange" onclick="bypassSignUp()"> >Sign up</button>
</div>
</div>
</div>
</div>
When I have added it, I put it at the buttom of my html (It was suppose to be part of the navn bar)
And this is how it looks in the html
When I click on it I see the Sign Up form, as expected:
This is the whole html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nome</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
<script>
function bypassSignUp() {
// For testing purposes, you can directly redirect to the user page after bypassing sign-up
alert('Bypassing sign-up. Redirecting to user page...');
window.location.href = 'user_page.html';
}
</script>
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFEFEF;">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="https://picsum.photos/400"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">CONTACT</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">
<div class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#loginModal">LOGIN</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<p class="promo-title">Esercizio Luglio 2023</p>
<p>Check the tutorials</p>
<a href="#"><img src="https://picsum.photos/400" class="play-btn">Watch Tutorials</a>
<div class="col-md-6 text-center ms-auto">
<img src="https://picsum.photos/400" class="image-fluid">
</div>
</div>
</div>
</section>
<!-- Login Modal incomplete -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
aria-hidden="true">
</div>
<!-- Sign In Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange" onclick="bypassSignUp()"> >Sign up</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalRegisterForm">SIGN IN</a>
</div>
</body>
</html>
I have "moved" the SIGN IN button at the top, but when I click on it, it doesn't work.
The SIGN IN form doesn't pop up.
This is the html I have modified:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nome</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
<script>
function bypassSignUp() {
// For testing purposes, you can directly redirect to the user page after bypassing sign-up
alert('Bypassing sign-up. Redirecting to user page...');
window.location.href = 'user_page.html';
}
</script>
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFEFEF;">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="https://picsum.photos/400"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #EFEFEF;">CONTACT</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">
<div class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#loginModal">LOGIN</div>
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-link">
<a href="" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-target="#modalRegisterForm"> SIGN IN
</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<p class="promo-title">Esercizio Luglio 2023</p>
<p>Check the tutorials</p>
<a href="#"><img src="https://picsum.photos/400" class="play-btn">Watch Tutorials</a>
<div class="col-md-6 text-center">
<img src="https://picsum.photos/400" class="image-fluid">
</div>
</div>
</div>
<img src="https://picsum.photos/400" class="bottom-img">
</section>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
aria-hidden="true">
<!-- Add your login modal content here -->
</div>
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange" onclick="bypassSignUp()"> >Sign up</button>
</div>
</div>
</div>
</div>
</body>
</html>
答案1
得分: 1
可能的问题是在您最新的HTML文件中，将 data-toggle 属性重命名为 data-bs-toggle。请将属性重新命名回去。
英文:
The problem might be due to renaming the data-toggle attribute to data-bs-toggle in your latest HTML file. Rename the attribute back.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年8月11日 00:03:55
- 转载请务必保留本文链接：https://go.coder-hub.com/76877504.html
- bootstrap-4
- css
- frontend
- html
- layout
评论