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

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

ただいまの
回答率

90.75%

  • JavaScript

    15236questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8282questions

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

  • CSS

    5306questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • ポップアップ

    7questions

    一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

JavaScriptでポップアップが閉じられない

受付中

回答 16

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 3,076

G.U.

score 88

こんにちは、プログラミング初心者でWebアプリを作っており、
現在、JavaScriptの簡単なところで詰まってしまいました。

あるWebアプリをコピーして練習をしているのですが、
元々のhtmlのソースに処理をしていくので、
だいぶわかりにくくなってしまっています。

そこで、今回はポップアップを表示させて、
「キャンセル」ボタンを押すと
そのポップアップが閉じる処理をJavaScriptにさせたいです。

現状は、ポップアップは表示できたのですが、
閉じる処理がどうもできません。
何卒ご教授願います。

こちらが、関係があると思われるソースコードです。
<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか?</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); return false;">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
</script>

だいぶ画面とにらめっこをしていたのですが、
わかりません。
よろしく御願い致します。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 16

0

単純に質問として無駄な記述が多く、皆さん解答しきれないようですね。

最初はプラグインでも動かないのかなと思ったんですが、単純にjsをつかってポップアップを実現させたいと、そういう意味だと解釈しました。

そうなるとjQueryを使ったら超絶かんたんですよ。

<!-- ポップアップする為のリンク -->
<a class="btn" href="#target">開く</a>

 <!-- ポップアップ箇所 ここから -->
<div class="popup" id="target" style="display: none">
    内容
    <p class="close"><a href="#">閉じる</a></p>
</div>
<!-- ポップアップ箇所 ここまで -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    // 開く
   $('.btn').click( function(){
        var target = $(this).attr('href');
        $(target).fadeIn();
    });
    //消す
   $('.close').click( function(){
        var $target = $(this).parents('.popup');
        $target.fadeOut();
    });
});
</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/01 06:20

    Dialog要素とポリフィルを使うのはどうですか?
    http://demo.agektmr.com/dialog/

    キャンセル

0

とりあえず、動作確認をとるために欠落していた情報を、こちらである程度、推測してですが、補完したソースをまずは提示しますね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか?</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); ">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
// -->
</script>

</body>

</html>
ちなみに、このコードは、まだメチャクチャですよ?提示されたコードを、あくまでも動作確認するために補完しただけです。
そして、スクリプトはコメントで囲むようにしてくださいね?うっかりするとコードが表示されてしまいます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

まず、おそらく、
イベントハンドラとは何か?どうやって実装するものか?
インラインスクリプトとは何か?
要素のonClick属性にスクリプトを書くというのはどういうことなのか?
これが理解できていませんね?

こちらを読んでみてください。
HTMLへのスクリプトの埋め込み

では、今現状イベントハンドラが何処にどのようにアタッチされているかを確認してみましょう
こういう時に、とっても便利なのがFireFoxというブラウザでとても強力なデバッグ機能があります

スクリプトなどの開発も、まずこれでやっておいてから、IEやクローム等、クロスブラウザ対応を行うと
楽です。
下のはイベントハンドラの状況の調査のみ行っていますが
スクリプトのデバッグ機能も強力です。途中で値を見たりもできます。活用しましょう。

使い方が分らなければ、
FireFox 開発者ツール 使い方
とでも、検索すれば沢山出てくるはずです。

要素を右クリックします![イメージ説明イメージ説明イメージ説明「ペアを組む」というリンクにはDOMで(つまりタグの属性として)イベントハンドラが定義してあることが分り、そこに書かれているスクリプト(すなわちこのリンクに対するイベントハンドラのコードその物)が定義されていることが分ります。


![イメージ説明ポップアップと把握している(←ここ重要あとで説明します)ウィンドウの選択をキャンセルするためのリンクには
DOMで(つまりタグの属性として)イベントハンドラが定義してあることが分り、そこに書かれているスクリプト(すなわちこのリンクに対するイベントハンドラのコードその物)が定義されていることが分ります。
ここに、window.close()と書いてある時点で・・・ 愕然としましたが、慣れてないのですから仕方ありませんね。まぁ後で説明します。


イメージ説明そして、そのリンクを包むPタグには・・・ jQueryでLiveつまり動的にイベントハンドラが定義されており
そこに、スクリプトの関数が接続してあります
内部の要素にイベントハンドラが定義してあり。それを包む要素にも定義してあります。
もちろん、整合性が取れていれば問題はありませんが・・・

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0


ここまではOKですか?

続けます。

さて、まず、大きな勘違いをなさっていますが、現在、そちら様がポップアップウィンドウだと思っている物は
ポップアップウィンドウなどではありません
ちがいます。ちがうんです。
もしも、本物のウィンドウであったならば

<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>
これは、こうなっているはずです
<a href="javascript:window.open('popupWindowSorce.htm', 'popupWindow', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');">ペアを組む</a>

でも、そうはなっていませんね?
じゃぁどういうことかと言うと、
 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
このDIVタグに、style="display: none"とありますね?
つまり、このDIVタグで囲まれている要素は、
存在しているにも関わらず、要素のサイズは0で非表示状態で待機している
のです。

キーワードを
CSS スタイルシート display
で検索してみてくださいね。

そして、何らかのタイミングで、この要素のスタイルが、
style="display: block"と書き換えられた瞬間に
いきなり忽然と魔法のようにあらわれるのです。表示される瞬間に要素のサイズも指定されます。

そして、ご提示いただけていませんが、おそらくは、このDIVタグに対して定義されている
クラス名 area-popupか pair-choice もしくは、id名choice_84462_popupに対応する
スタイルシートにfloat属性が定義されている
これによって、他の要素の上にかぶさって表示されているがため、
一見ポップアップウィンドウのように見えているだけ
で、これはウィンドウではなく、れっきとした、このページ、同一ページ内の1要素でしかありません。

スタイルシート floatでググってみてください。

重ね合わせと、表示位置をいじることで要素をそのように見せているにすぎません。
それが証拠に、このページのソース自身に、ポップアップウィンドウだと把握していた要素が
定義されています。これが動かぬ証拠です。

本当のポップアップウィンドウであれば、別ファイルに内容が記述してあるはずなんです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0


さて、前置きがやっとおわりました。すみません。力不足なため、これだけのことに
ずいぶんと時間を使ってしまいました。申し訳ありません。

では、どうすればいいのか

まず、ポリシーがブレています。

おそらくは、よく理解できなかったがため、悪戦苦闘して試行錯誤されたのでしょうね><
苦労なさったんですね。がんばりましたね。

その結果、イベントハンドラを、いったい、DOMで(タグの属性として)定義するつもりなのか
スクリプトで動的に定義するつもりなのかが統一されていません。

そしてscriptタグで囲まれているスクリプトについて理解されていませんね?
このスクリプトが理解できていたら、これを生かすソースになったはずですし、
これを使ないで、DOMに(タグの属性として)イベントハンドラを書くつもりならば
このスクリプトは用なしなので、さくっと消していたはずです。

アプローチは2つあります、
1.全てイベントハンドラはDOMに(タグの属性として)定義する
2.scriptタグで囲まれているスクリプトで動的に要素に対してイベントハンドラを接続する(アタッチする)

まず、1のアプローチからやってみましょう。
1のアプローチでも2つの方法があります。
1-1.簡単なスクリプトでとりあえず逃げる。
1-2.ちゃんとscriptタグ内のコードを呼び出して、このコードを生かす。

1-1ならば
まず、ポップアップとして見かけ上表示され、他の要素の上に重なって表示される、この要素の
 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
現状style="display: none"となっている物をstyle="display: block;"と書き換えてやることです。
そのためには
a.要素を特定する
b.要素の属性のstyleの、さらにdisplayをblockへ書き換える

aをjQueryを使わずに書くならば
document.getElementById('choice_84462_popup')
こうですね?

jQueryで書くなら
$('#choice_84462_popup')
こうなりますね?分らなければ 「jQuery セレクタ」で検索してください。
調べれば分かることを放棄して楽なほうへ行こうとしているのが見えていますよ?
投げ出さないでください。ちゃんと説明しますから。

bをjQueryを使わずに書くならば
ある特定の要素のオブジェクト.style.display='block'
こう書きます。

jQueryで書くなら
ある特定の要素のjQueryオブジェクト.css('display', 'block');
こうです
style ではなく css であることに注意してください。

組み合わせて

jQueryを使わずに書くならば
document.getElementById('choice_84462_popup').style.display='block';
jQueryで書くなら
$('#choice_84462_popup').css('display', 'block');
こうなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0


そして、問題はこれをどう起動するか(kickするといいます)です
いま、1.全てイベントハンドラはDOMに(タグの属性として)定義するの1-1.簡単なスクリプトでとりあえず逃げる。
をやってるので、ポップアップのDIVタグの要素を表示する契機(トリガー)となる要素へ、
このスクリプトを定義してやって、
clickというイベントが発生した(ユーザーがトリガー要素をクリックした)タイミングで
kickするように指定してやればいいわけです。

トリガーとなる要素は、
<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462">ペアを組む</a>
このリンクで、これをclickしたときにkickされればいいので、この場合onClickという属性にセットします。
例として、jQueryで書いたものを呼び出す場合の書き方を書きます。もう片方は分りますね?
<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="$('#choice_84462_popup').css('display', 'block');">ペアを組む</a>

付いてきていますか?途中で投げ出さないでください。今ががんばり時ですよ?
がんばれば出来るんです。やればできます。投げ出しては進歩はありませんよ? Fight!!

こんどは、1.全てイベントハンドラはDOMに(タグの属性として)定義する の1-2.ちゃんとscriptタグ内のコードを呼び出して、このコードを生かす。
これを、やってみましょう。

これを実現するためには、
c.まずは、実現したい処理を一纏まりの塊として定義してやり
d.そして、これを呼び出すコードを書く

cを実現するためには、処理の塊を関数として定義・宣言してやります
今までのことを踏まえて、少しずつ応用していきますよ?しっかりついてきてくださいね?

JavaScriptにおいて処理を一纏まりの定義(関数)として宣言するにはfunctionを使います。

全部ネイティブな(jQueryを使わないで)処理で書くなら、こう書きます。
function showDiv(){
    document.getElementById('choice_84462_popup').style.display='block';
}

jQueryで書くならこう書きます。
function showDiv(){
    $('#choice_84462_popup').css('display', 'block');
}

今は、関数の定義は非常に簡単なものにしていますが、その気になれば、関数内で
DIVを表示状態にして(スタイルをblockにする)
ユーザ名に合わせて、特定のユーザーであったら、特定の要素の色を変える
条件によっては、画像を表示するimgタグを動的に追加して画像を表示する
などなど、その気になれば、いくらでも作りこむことができます。
やり方は、あえて書きません、勉強する気があれば、それこそteratail内を血眼になって
探し回れば売るほど出てきますよ?努力してください、努力を怠らなければ結果はついてきます。

つぎに、dですが、これは、もう既にやり方を提示してありますよ?それを応用するだけです。

全部ネイティブな(jQueryを使わないで)処理で書くなら、こう書きます。
<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="showDiv()">ペアを組む</a>

<script type="text/javascript">
<!--
function showDiv(){
    document.getElementById('choice_84462_popup').style.display='block';
}
// -->
</script>

jQueryで書くなら、こうなります
<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="showDiv()">ペアを組む</a>

<script type="text/javascript">
<!--
function showDiv(){
    $('#choice_84462_popup').css('display', 'block');
}
// -->
</script>

考え方は同じです。もし迷ったら、前に戻ってください。一つ一つ基本を提示して積み上げてきていますので、迷ったら基本に立ち返ってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0


さて、これで、1.全てイベントハンドラはDOMに(タグの属性として)定義する についての
ポップアップウィンドウを開く(ように見えているだけの、実際にはDIVを表示状態にする)
が、出来ましたね?

そして、本題の閉じるための方法ですが、
ちゃんと、ここまでを飛ばしたりせずに読んできましたか?
理解できなかった場合は、前に戻って、ちゃんと確認しましたか?
どうしても理解できないなら提示したコードを実際に動かして、色々いじってみって試しましたか?

答えを書くのは簡単です。あえてそれをせずに独りよがりな演説を調子にのって、ぶちかましている
某巨大掲示板で言う処の、公開オナニーを行うという
恥さらしな行為までした、私の苦労を無駄にしないでください。

試してないなら今からでも動作確認してきてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0























おかえりなさい。大丈夫ですか?
それでは、閉じる場合についてご説明しますが、実はもう必要な予備知識は与えていますよ?
何のために、これだけ言葉を重ねたと思っていますか?

確かに答え一発、これを提示すれば、ことは終わりです。
しかし、それは相手が十分な予備知識を習得している場合です。
失礼ながら、コードを見ただけで必要な予備知識の習得が出来ていないのが容易に想像できたので
予備知識から、ご説明したんです。

もう今は必要な予備知識は習得できているはずなので、どうすればいいかわかるはずです。

私は何と書きましたか?
現在、そちら様がポップアップウィンドウだと思っている物は
ポップアップウィンドウなどではありません 

DIVタグに、style="display: none"とありますね?
つまり、このDIVタグで囲まれている要素は、
存在しているにも関わらず、要素のサイズは0で非表示状態で待機している

何らかのタイミングで、この要素のスタイルが、
style="display: block"と書き換えられた瞬間に
いきなり忽然と魔法のようにあらわれる

こう書いたはずですよ?
そして、displayをblockに書き換える方法を、えんえんと説明してきました。

非表示状態がdisplay: none;で
表示状態にするにはdisplay: block;なら

消すには逆をやればいいと気づきましたか?

ちゃんと、これが偽物のポップアップウィンドウで、本当はただのDIVを隠しておいたものを
望んだタイミングで表示しているにすぎないということが理解できていれば
逆をやればいいと気づくはずです。

しかし、提示されたコードは
window.close()でしたね?
だから、愕然としたのです。理解できていないこと、そして予備知識の習得が出来ていないことを
読み取れたのです。

もちろん、プログラミングの経験がないということは把握しています。
だから、1から説明しています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0


能書きはいいから、さっさと教えろ?いいでしょう。もう、提示しても理解できますよね?
説明なんかしませんよ?分らないなら前に戻って確認してきてください。

DOMに直書き、jQueryの場合のみ書きます。DOMに直書きでネイティブコードの場合は、もうどうすればいいか、ここまでのことが、ちゃんと理解できていれば分るはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="$('#choice_84462_popup').css('display', 'block');">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか?</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="$('#choice_84462_popup').css('display', 'none'); ">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
/*
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
*/
// -->
</script>

</body>

</html>

scriptタグ内のコードをDOMから呼び出す場合でjQueryで書くなら、こうなります。ネイティブコードは書きません。分るはずです。分るように説明してきましたよ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="showHideDiv('show','choice_84462_popup')">ペアを組む</a>

<!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか?</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="showHideDiv('hide','choice_84462_popup')">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
function showHideDiv(mode,id){
    var jqDiv = $('#'+id);
    
    if (!jqDiv[0]) {
        alert("ランタイムエラー:idの指定が不正です。");
        return false;
    }
    
    switch (mode){
        case 'show':
            jqDiv.css('display', 'block');
            break;
        case 'hide':
            jqDiv.css('display', 'none');
            break;
        default:
            alert("ランタイムエラー:modeの指定が不正です。");
            break;
    }
}

/*
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
*/
// -->
</script>

</body>

</html>
はい、気づきましたか?気づいてませんか?
何かが違いますよね?

私は意図的にコードを変えてますよ?

意地悪ですか?

そう取られるならそれでもいいですが、この意図は、関数呼び出しの形を取れば
このように凝った事ができるということを提示したかったんです。

何をしているのか理解できませんか?そうかもしれませんね・・・
でも、ご説明しません。

自分で調べてみてください。どうもjQueryだからといって難しいからと投げ出してコードの理解に
挑もうとしてないように見受けられたから、こうしてるのですよ?

ただし、注意点が一点、コードが何をやっているかを理解するだけで終わらないでください。
本当に理解するということは、コードが何故こうなっているのか?いったい、何を意図してこうなっているのか?狙いは何なのか?
プログラマーそのものの、思考の流れ、意図していること。

それを考えてください。意味もなく、こんなコードを書いたわけではないのですよ?

jQueryでググってください。 コードの断片でも検索のキーワードに使ってググってみてください。
グーグル先生は、驚くほど頭がいいですよ?曖昧なコード断片でもそれなりにHITしてくれます。

jQueryユーザーはいっぱいいます。従って、これに関するページなんか掃いて捨てるほどありますよ?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0


ところで、何故、jQueryを使うのか? 今まで、あえて触れてきませんでしたが、JavaScriptというのは
ブラウザごとに微妙に実装が違ったりしています。同じブラウザですら、バージョンが違うと動作が違ったりします。そういうブラウザの違いをjQueryは吸収してくれるのです。
これを使えば、クロスブラウザ開発が格段に楽になるんです。
あとは、CSSの違いくらいが、クロスブラウザ対策で残っているくらいです。

そして、jQueryには、ネイティブなJavaScriptにはない色々な便利機能があります。だから皆、jQueryを使うんです。

勉強する気さえあれば、こんな、私のような未熟者のコードなんか、すぐに分るはずですよ?
こちらにいらっしゃる、有能な先輩方なら、私のこのコードみて下手糞と笑っているはずですよ?

もちろん分っています。勉強したくても、どこから手を付けていいのかが分らないのですよね?
それは私が何とかしましょう。そのために言葉を重ねて説明しています。

本当に勉強する気持ちがあるなら、分らなかったら悔しくて眠れないはずです。
そして、どうやっても分らなかったら、恥を忍んででも、ここへ教えてくれと来るはずです。

色々生意気言ってすみません。最後に、まだ、解決してない問題がありますよね?

アプローチは2つあります、
1.全てイベントハンドラはDOMに(タグの属性として)定義する
2.scriptタグで囲まれているスクリプトで動的に要素に対してイベントハンドラを接続する(アタッチする) 

この2を説明してません。これを述べなきゃ片手落ちというものです。
では、以下にスクリプトで動的に要素に対してイベントハンドラを接続する(アタッチする) 方法を
jQueryを使って提示します。

これによって、初めて、そちら様がご用意なされたライブラリが使えます。
その結果、ポップアップするDIVがリッチなものになるんです。
確認できなかったので、例としてあげますが
(このライブラリに、そんな機能があるとは言ってません誤解しないでください)
たとえばポップアップする時にMACみたいに、小さなウィンドウが
回転しながら大きくなっていって、最後にボーン見たいに出せるかも
ライブラリがそう作ってあれば、出来るかもしれないのです。
何の労力も使わずに、ただライブラリを利用するだけでです。
これが狙いでライブラリを使っているんですよ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<!--
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>
-->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか?</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <!--
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); return false;">キャンセル</a></p>
            -->
            <p class="btnCancel-choice"><a href="#">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
$(function () {
    $(document).on('click', '#choice_84462', function (e) {
        $('#choice_84462_popup').magnificPopup({
            type: 'inline',
            preloader: false
        });
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
// -->
</script>

</body>

</html>
ちゃんと元あったコードを活用し動くように修正してあります。そのはずです。

ただ、申し訳ありません。ちゃんと動作確認をした上で提示したかったのですが
必要なファイルが、いくつかご提示いただけていないため、
今提示したコードだけは、動作確認が出来ませんでした。

ここまで来て、それは無いだろう?はい、すみません。私の力不足です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

ですからー、この人プラグインなんて使ってないんですって!

でも皆さまプラグインを使っていると勘違いして複雑になっています。
ていうかこの程度の動きはプラグインつかうと余計めんどくさいきがするんですが。

なので、いったんそのどっかからコピってきた訳の分からないHTMLソースを全部削除して、シンプルに以前私の提示したソースで組み直してみてほしいなぁ。

一回書いたモノを全部破棄するのもクリエイティブな事だと思いますよ。ウンウン

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

ブラウザによっても挙動が違うようです。
このサイトでまとめてくれてますが、window.close()で閉じるのはIEだけみたいです。

挙動が大事! JavaScriptでWindow.closeする時のブラウザ別対応まとめ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

閉じるボタンに
onclick="document.getElementById('choice_84462_popup').style.display='none';"

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

おはようございます

えーと、大変申し上げにくいのですが・・・
めちゃくちゃです><

まぁ、練習でいじり倒していれば当然かぁ・・・

私も、スキルが足りない人間なので、どこまでお力になれるかわかりませんが、がんばってみますので、
しばしお付き合いください。ただし、無能な人間なので、言葉を重ねないとうまく説明できないので
冗長になりますが、どうか、どうかご容赦ください。
現に、少し前に回答した物にマイナス評価もらいました(TT

まず、ご提示いただいたコードですが、ぱっと見ただけで、jQueryをお使いだということがわかるので
それならば、質問のタグにjQueryを付けるべきです。 あのぅ・・・ jQueryを使っているということを把握されていますよね?もし、把握されていなかったとしたら、ちょっと困ります。

そして、肝心なjQueryのバージョンがいくつなのかをソースで示すなり、質問文内で示していただかないと
皆さん回答に困ります。

次に、よく見れば、Javascript(jQuery)のライブラリを使われてますね?
であれば、その情報も欲しいです。このことも、把握されていますか?

仕方がなかったので、ソースから読み解いて探し回って、使い方を、その場で自分自身をチューニングして対応しました
少し時間を取ってしまいました。たぶん困っておいででしょうから、もう少し早く回答を書きたかったんですけどね><

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/28 13:18

    ああぁぁ またやってしまいました。
    後になって気づくとは・・・

    えっと、私がライブラリと書いているところはプラグインと読み替えてください><
    あぁ 恥ずかしいよ

    キャンセル

-1


ここのコードが理解できていなかったのですよね?jQueryだったからですか?
だから、逃げの一手で、DOMにネイティブでイベント処理を書いたのですよね?見ればわかります。

確かにこれは簡単じゃないかもですね。少し解説しましょう。
$(function () {
    // id属性にchoice_84462が指定してある要素に対して、clickイベントが発生した際、
    // 匿名関数を用意しておいて、これを実行させています。
    // 匿名関数?ググってください。と言いたいところですが・・・
    // 確かにこれは難しいです。分らないのも仕方ありません。
    // http://www.ajaxtower.jp/js/function/index5.html ここ見てください。
    // つまりこれがイベントハンドラの処理です。
    // jQueryのonメソッドでググってください。つまりこれが動的にイベントハンドラを
    // くっつける(アタッチしている)ことになります。
    // 'click'は何のイベントに対してイベントハンドラを定義するかを指定しています。
    // '#choice_84462'はセレクタ(要素を特定するための手掛かり)です。
    // 勘違いしてはいけません。#choice_84462という名前ではありません。
    // 頭に#が付いていると、idがchoice_84462という要素を探せという意味になります。
    $(document).on('click', '#choice_84462', function (e) {
            // idがchoice_84462_popupという要素に対して、magnificPopupメソッドを実行していますが
            // jQueryに、そんなメソッドはありません。
            // それと、よく見てください。
            // choice_84462 ではありませんよ? choice_84462_popupです。混同しないでください。
            // これを見つけたからmagnificPopupという
            // ライブラリを使っていると読み解けたんです
            // jQuery magnificPopupでググってください。
            // 本家のURLならライブラリをロードしてる場所に書いておきましたが
            // 使い方は他のサイトがいいでしょう。自分で探してください。
        $('#choice_84462_popup').magnificPopup({
            type: 'inline',
            preloader: false
        });
    }); // ここまでがidがchoice_84462な要素のイベントハンドラ
    // もう一つ別の要素に対して、イベントハンドラをアタッチしています。
    // ただし、今度はセレクタが'.btnCancel-choice'です。
    // セレクタの先頭に . (ドット)を書いた場合はクラス名で探せという意味になります。
    // クラス名にbtnCancel-choiceが指定されている要素に対してのイベントハンドラです。
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault(); // ここを見ましょう。
                            // http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html
                            // ちょっとググっただけで、すぐに見つかりましたよ?
                            // コードの理解を早々に投げ出して調べてもいないのが丸わかりです
                            // とはいえ、これは見つけたからと言ってすぐには理解できないかもですね。
                            // イベントと言うのはですね。特定の要素で発生した後に
                            // 同じイベントが、それを包括する要素へと伝播します
                            // 要素の上位へ上位へと上がっていくことから、泡が浮き上がっていくようなので
                            // bubble(泡)で、バブリングといいます。
                            // 特定の要素でイベントが発生したとして、そこにイベントハンドラがないなら
                            // 処理しようがありませんから、そこでは何もしません。
                            // 定義してあれば、もちろん起動します。その上でさらに
                            // 親の要素へイベントが浮き上がり、どんどん上がって行きながら
                            // 途中で見つけたイベントハンドラをかたっぱしから起動するのです
                            // もちろん、上がって行っているイベントが見つけたイベントハンドラが
                            // 処理対象としているイベントであった場合ですよ?
        $.magnificPopup.close(); // magnificPopupのcloseを調べてください。
    });
});

さぁ、手掛かりは書いておきましたよ?調べ方の道筋を示しました。
今度は何処から手を付けていいか分らない等と言うことは無いはずです。
これで分らないと言い出すのは、調べてないということになりますよ?
いやまぁ、見つけても理解に難しい内容のものがある場合も確かにありますが・・・
そのときは・・・ いますよね? 馬鹿だけど、おせっかいな奴が・・・

ネイティブでイベントハンドラをアタッチする方法は、
javascript イベントハンドラ 追加
でググってください。いやってほど出てきますよ?

お疲れさまでした。これで終わりです。
よく投げださずに付き合ってくださいました。

説明が下手な言葉を重ねねば満足に説明も出来ない無能な人間に付き合っていただき
本当に、本当にありがとうございました。m(_ _)m

ここまで投げ出さずに努力してくださったことに対し、最大限の敬意を表します。

最後に、今一度書きます。

勉強する気さえあれば、こんな、私のような未熟者のコードなんか、すぐに分るはずですよ?
こちらにいらっしゃる、有能な先輩方なら、私のこのコードみて下手糞と笑っているはずですよ?

本当に勉強する気持ちがあるなら、分らなかったら悔しくて眠れないはずです。
そして、どうやっても分らなかったら、恥を忍んででも、ここへ教えてくれと来るはずです。

これだけダラダラと説明することを決心した時から最後まで付き合うと腹を決めていました。

ご自身が書かれているように、プログラミング初心者ということは承りました。
だからこそ、手取り足とり解説しました。

どうか投げ出さないでください。


待ってますよ?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

なんだか意見や知識が溢れかえっているようなので条件を満たす最小限の方法を私は提示してみます。

まずこのポップアップはHTMLのdivタグなどを表示して擬似的に再現された物です。
"ポップアップ箇所ここから"とコメントされている箇所を見てください。
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
<!--省略-->
</div>
style="display : none;"という記述がありますね。これは設定された要素を非表示にします。
次にクリックされた時の処理を見てください。
CSSのStyle、displayをblockにするというコードがポップアップを表示するコードとなります。

であれば非表示にする(ポップアップを閉じる)方法は単純です。
閉じるためのボタンとなる物を設置し、そこにクリックイベントで動作するメソッドを設定します。

//処理内容
document.getElementId("choice_84462_popup"").style.display="none"

これで閉じる(非表示にする)ことができます。


……がjQueryプラグインを使用しているのですよね?
であれば閉じるメソッドも当然そこにある物と思うのですが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    window.open を使わずにpopupする方法

    window.open を使わずにpopup画面を表示し、 その中でボタンを押したりしたい div 要素を動的に変えて、モーダルで・・・ という方法があるようですが、 元の画面

  • 解決済

    JavaScriptの確認ダイヤログについて

    JavaScriptの確認ダイヤログについての質問です。以下のコードにて、チェックボックスをチェックした値について、削除ボタンを押すと「本当に削除しますか?」というダイヤログが表示

  • 解決済

    JavaScriptでギャラリーを作りたい

    現在JSでギャラリー的なものを作ろうとしています 仕様としては 画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです ですが

  • 解決済

    作成したボタンの値をテキストボックスへ出力方法

    作成したボタン(HTML)押下後、テキストボックスへ出力するにはどのようにすればよいでしょうか? このテキストボックスは ・暗証番号機能(数値のみ) ・4桁の入力制限 以上で

  • 受付中

    innerHTMLの追加と削除

    こんにちは 現在JSでToDoメモのようなものを作ろうと思っているのですが 問題点が2つ出てきました。 1、innerHTMLにtextに書き込まれた内容を書き込めるが追加ができな

  • 解決済

    Javascriptによるテーブル内の任意のセル内テキストの編集

    HTMLとJavascriptで、テーブルのセル内のテキストをモーダルウィンドウ内で編集し、 編集後の内容を元のテキストと置き換えるスクリプトを作成しています。 ・テーブル内の任

  • 受付中

    スクロールとクリック制御がバッティングする

    以下のように600px以上スクロール時に「hoge」という固定フロートメニューを表示し 内部のリンクをクリックするとページ下部「hoge-anchor」要素へページ内遷移します。

  • 解決済

    モーダルが表示されない

    前提・実現したいこと Bootstrapでボタンをクリックするとモーダルがポップアップするサイトを作っています。 ボタンを押すと一瞬だけアクションが起きるのですが、すぐに元の画

同じタグがついた質問を見る

  • JavaScript

    15236questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8282questions

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

  • CSS

    5306questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • ポップアップ

    7questions

    一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。