Q&A
<style>と<script>は<head>タグの中に書くのが基本です。
(先に条件や処理を読み込ませるためです)
あと<script>が無くて</script>が2か所あります。
本当にこのまま書いてあるとソースコードが画面ひらいたら見えている状態だけど・・・
実現したいこと
モーダルウィンドウを作ろうと思って作ったのですが、モーダルウィンドウが開きません。
モーダルウィンドウを開くコードが間違っていましたら教えてください。
ソースコード
<div id="sampleModal" class="samplemodal"> <div class="samplemodal-wrap"> <div class="samplemodal-bg"></div> <div class="samplemodal-box"> <div class="inner"> 内容はいります <div class="samplemodal-close"><span>閉じる</span></div> </div> </div> </div> </div> <a id="modal-open" class="cp_btn">button</a> <style type="text/css"> a.cp_btn { position: relative; display: block; width: 160px; padding: 0.8em; text-align: center; font-weight: bold; text-decoration: none; color: #FFF; text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); background: #1A237E; transition: .4s; border-radius: 4px; } a.cp_btn:hover { text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); transition: .4s; } html.modalset { overflow: hidden; } .samplemodal { display: none; width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9999; } .samplemodal-wrap { width: 100%; height: 100%; text-align: center; padding: 20px; overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; overflow: -moz-scrollbars-none; white-space: nowrap; } .samplemodal-wrap::-webkit-scrollbar { display: none; } .samplemodal-wrap:after { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 100%; } .samplemodal-bg { position: absolute; left: 0; top: 0; background: rgba(51, 51, 51, 0.8); width: 100%; height: 100%; } .samplemodal-box { width: 100%; max-width: 900px; display: inline-block; vertical-align: middle; position: relative; } .samplemodal-box .inner { background: #fff; padding: 80px 20px; text-align: left; } .samplemodal-box .inner > :first-child { margin-top: 0; } .samplemodal-box .samplemodal-close { ・・・・ } $("#modal-open").click( function(){ //キーボード操作などにより、オーバーレイが多重起動するのを防止する $(this).blur() ; //ボタンからフォーカスを外す if($("#modal-overlay")[0]) return false ; //新しくモーダルウィンドウを起動しない [下とどちらか選択] //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する [上とどちらか選択] //オーバーレイ用のHTMLコードを、[body]内の最後に生成する $("body").append('<div id="modal-overlay"></div>'); //[$modal-overlay]をフェードインさせる $("#modal-overlay").fadeIn("slow"); //[$modal-content]をフェードインさせる $("#modal-content").fadeIn("slow"); } ); </script> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="jquery.translate.js"></script> <script> $(function() { $('.samplemodal-open').click(function(){ $('#sampleModal').fadeIn(); $('html').addClass('modalset'); }); $('.samplemodal .samplemodal-bg,.samplemodal .samplemodal-close').click(function(){ $('#sampleModal').fadeOut(); $('html').removeClass('modalset'); }); }); </script>
補足情報
html内に記入をしたいのです。
コードは原則コピペしてください。
ファイルがわかれているならコードブロックはファイル毎に別にしてください。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
