質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4511閲覧

モーダルウィンドウが開かない

8971pc

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/09/18 23:07

実現したいこと

モーダルウィンドウを作ろうと思って作ったのですが、モーダルウィンドウが開きません。
モーダルウィンドウを開くコードが間違っていましたら教えてください。

ソースコード

<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内に記入をしたいのです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_kuma_

2020/09/18 23:24

<style>と<script>は<head>タグの中に書くのが基本です。 (先に条件や処理を読み込ませるためです) あと<script>が無くて</script>が2か所あります。 本当にこのまま書いてあるとソースコードが画面ひらいたら見えている状態だけど・・・
m.ts10806

2020/09/19 00:28

コードは原則コピペしてください。 ファイルがわかれているならコードブロックはファイル毎に別にしてください。
guest

回答1

0

ベストアンサー

javascript

1 $("#modal-open").on('click',function(){ 2 $(".samplemodal").fadeIn("slow"); 3 });

投稿2020/09/18 23:47

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

8971pc

2020/09/19 02:03

ご回答ありがとうございます。 参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問