ホームページ上にあるログインボタンを押すとユーザー名とパスワードの入力用のモーダルが表示されるようにコードを書きました。
html css jQueryで下記コードを記述したところ、ホームページには
一瞬モーダルが表示されるのですが、0.5秒位で消えてしまいます。
下記コードです。
html
<div id="loginFormModal"> <p> ユーザー名 </p> <form action="###" method="post"> <input type="text" name="userName" id="login" placeholder="ユーザー名"> <p> パスワード </p> <input type="text" name="password" id="login" placeholder="パスワード"> </form> </div>css
(#)login{
background-color: rgb(236, 245, 137);
padding: 5px;
border-radius: 5px;
}
/モーダル/
(#)loginFormModal{
margin: 100px auto;
height: 150px;
width: 150px;
background-color: rgb(208, 213, 218);
border-radius: 5px;
display: none;
}
jQuery
$(function() {
$('#login').click(function(){
$('#loginFormModal').fadeIn();
}
)
});
注:#を入力するとテラテイル上で意図しないプレビューになったので仮に(#)を記載しましたが、コードは普通に#で記述しています。
モーダルが0.5秒位で消えてしまうので、ずっと表示させて置きたいのですが、
原因と解決策はどのようになりますでしょうか?
回答1件
あなたの回答
tips
プレビュー