ページの読み込み時にdivクラスを非表示にする

debugcn 投稿 Dev

リッキー

こんにちは私は表示されているサインアップフォームを持っており、ページが読み込まれたときにそれを非表示にしようとしています。そこで私がしたことは、フォーム全体を「signup」という名前のdivクラスに入れ、スクリプトコードで非表示にすることでした。

更新：html

<script>
  document.write('<div class="js">');
  </script>

<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
    <span>Sign In<a href="#close" id="close">&#215;</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">Sign in</button>
    </form>
</div>
</div>
</div>
<script>
  document.write('</div>');
  </script>

私のJSコード（非表示機能なし）：

$('.button').click(function(){
          $('#modal').css('display','block');
          $('.modal-bg').fadeIn();
    });

        $('#close,.modal-bg').click(function(){
              $('.modal-bg').fadeOut();     
              $('#modal').fadeOut();
          return false;
        });

非表示/表示は機能しているように見えますが、クリックするとフォームが非表示になります。フォームを入力/クリックできないと誰もサインアップできないため、これは問題です。（問題は修正されました）

これがcodepen（ライブバージョン）です：http：//codepen.io/mariomez/pen/WbgrNK

ピート

サインアップdivはまったく必要ありません-複雑になると思います。モーダル背景を非表示にして開始するだけなので、ボタンをクリックする前にコードを追加します。

$('.modal-bg').css('display','none');

例

更新

ページの読み込み中にフォームが表示されないようにするには、jsdivを追加します。

あなたの体のオープニングタグの後：

<script>
   document.write('<div class="js">');
</script>

あなたの体を閉じるタグの前：

<script>
   document.write('</div>');
</script>

これにより、jsのみのスタイルを適用できます。この場合はmodal-bgに適用できます。

.js .modal-bg {display:none;}

次に、上記のjsを削除して、cssにあるモーダルを非表示にすることができます

更新されたcodepen

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-07-1

コメントを追加

サインイン

分類Dev