現在、buttonにそのままモーダル要素を記述しているので、エラーでなくても一瞬モーダルが表示されてしまいます。
試したこと
html 14行目のmd_boxをjavascript 9行目のfalseのときにattrで渡す。
→mb_boxのdisplay:none;を他のclass でhtml 14行目に設定し、他の装飾をattrで渡してみる。
よろしくお願い致します。
html
1<html> 2 <head> 3 <meta charset="utf-8"> 4 <link href="css/index.css" rel="stylesheet" type="text/css"> 5 <script type="text/javascript" src="js/jQuery 3.3.1.js"></script> 6 </head> 7 <body> 8 <form action="login.php" method="post" class="checkform" name="form" onSubmit="return check()"> 9 <input type="password" name="pass" size="15" class="pass" placeholder="(例)1234567890"> 10 <button type="submit" name="submit" id="md_open" class="md_btn">ログイン</button> 11 </form> 12 13 <div id="md_box"><!--14行目--> 14 <p>半角数字10桁で入力してください。</p> 15 <a id="md_close" class="md_btn">CLOSE</a> 16 </div> 17 </body> 18</html>
javascript
1 <script> 2 //フォームバリデート 始まり 3 function check(){ 4 var flag = 0; 5 if(document.form.pass.value.match(/[^0-9]+|^.{0,9}$|.{11}/)){ 6 flag = 1; 7 } 8 if(flag){ 9 return false;//9行目 10 }else{ 11 return true; 12 } 13 } 14 //フォームバリデート 終わり 15 16 //モーダルウィンドウ 始まり 17 var win = $(window); 18 var w = win.width(); 19 var h = win.height(); 20 var m_open = $('#md_open'); 21 var m_close = $('#md_close'); 22 var m_content = $('#md_box'); 23 24 $(document).ready(function(){ 25 centeringModalSyncer(); //センタリング 26 }); 27 28 //クリックしたら表示 29 m_open.click(function(){ 30 $(this).blur() ; 31 if( $('#md_overlay')[0] ) return false ; 32 //オーバーレイを表示 33 $('body').append( '<div id="md_overlay"></div>' ); 34 35 var m_overlay = $('#md_overlay'); 36 m_overlay.fadeIn(1000) ; 37 //フェードイン 38 m_content.fadeIn(1000) ; 39 //クリックした時 40 m_overlay.add(m_close).unbind().click( function(){ 41 42 m_content.add(m_overlay).fadeOut(1000,function(){ 43 //オーバーレイを削除 44 m_overlay.remove() ; 45 }); 46 }); 47 }); 48 49 //センタリング 50 win.resize(function(){ 51 centeringModalSyncer(); 52 }); 53 //モーダルをセンタリング 54 function centeringModalSyncer(){ 55 w = win.width(); 56 h = win.height(); 57 //幅、高さ 58 var cw = m_content.outerWidth(); 59 var ch = m_content.outerHeight(); 60 m_content.css({ 61 'left': ((w - cw)/2) + 'px', 62 'top': ((h - ch)/2) + 'px' 63 }); 64 } 65 //モーダルウィンドウ 終わり 66 </script> 67
css
1 2@charset "UTF-8"; 3 4/*モーダル*/ 5#md_box{ 6 width:50%; 7 margin:0 auto; 8 padding:20px; 9 border:2px solid #aaa; 10 background:#fff; 11 z-index:2; 12 display: none; 13 position:fixed; 14} 15.md_btn{ 16 color:#fff; 17 text-align: center; 18 background-color: #333; 19 padding: 10px 0; 20 display: block; 21 font-size: 13px; 22 width: 150px; 23 margin-left: auto; 24 margin-right: auto; 25} 26.md_btn:hover{ 27 cursor:pointer; 28 color:#aaa; 29} 30#md_overlay{ 31 z-index:1; 32 display:none; 33 position:fixed; 34 top:0; 35 left:0; 36 width:100%; 37 height:120%; 38 background-color:rgba(0,0,0,0.75); 39} 40
回答1件
あなたの回答
tips
プレビュー