ブートストラップモーダルで画像をクリックしてメインページに戻す方法

Question

ボタンがブートストラップモーダルを開き、モーダルの画像をクリックすると画像のファイル名を送信するフォームを作成しようとしています（拡張子なしの方が良いでしょう）フォームに戻ってください。

モーダルダイアログの画像は、PHPのあるフォルダから読み込まれます。

長い間、この時に関係者との画像がこのようにPHPで呼び出されたときにこれを行う方法を見つけ出すことはできません:( は、事前にありがとう

EDIT：画像のファイル名を渡す必要がありますフォームでのTextInputに

モーダルコード：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog modal-lg" role="document"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" 
aria-label="Close"> 
<span aria-hidden="true">&times;</span> 
</button> 
<h4 class="modal-title" id="myModalLabel">Choose a picture</h4> 
</div> 
<div class="modal-body"> 
<div class="row"> 
    <div class="col-lg-12"> 
     <h1 class="page-header">Images</h1> 
    </div> 

<?php 
$files = glob("img/*.*"); 
    for ($i=0; $i<count($files); $i++) { 
     $image = $files[$i]; 
     echo ' 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
     <a class="thumbnail" href="#"> 
      <img class="img-responsive" src="'.$image .'" /> 
     </a> 

     </div> 

     ' 
     ; 

    } 
?> 

</div> 
</div> 
</div> 
</div> 
</div> 

メインページコード：

<button type="button" class="btn btn-info btn-lg" 
data-toggle="modal" data-target="#myModal">Open Modal 
</button> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="textinput">Text  
Input</label> 
<div class="col-md-4"> 
    <input id="textinput" name="textinput" placeholder="" class="form- 
    control input-md" type="text"> 
</div> 
</div> 

Answer 1

あなたは多分クッキーを使用することができます。

<script> 
function vars() { 
    var x = document.cookie; 
    // alert(x); // uncomment this to check value 
    // return x; 
    document.getElementById('textinput').value = x.split(';')[0].split('=')[1].split('.')[0]; // this give you the file name without extension in textbox 
} 
function setcookies(img){ 
    document.cookie = "selected_img="+ img.split('/').pop(); 
} 
</script> 

PHPの一部は次のようになります：

<?php 
$files = glob("img/*.*"); 
    for ($i=0; $i<count($files); $i++) { 
     $image = $files[$i]; 
     echo ' 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
     <a class="thumbnail" href="#"> 
      <img class="img-responsive" src="'.$image .'" onclick="setcookies(this.src);vars();" /> 
     </a> 

     </div> 

     ' 
     ; 

    } 
?> 

そして、あなたのモーダルを閉じた後、あなたがVARS（）関数を呼び出すことによって、あなたのVARを持つことができます。たとえば、これをメインページに表示します。

<button type="button" class="btn btn-info btn-lg" 
    onclick="vars()" >vars 
</button> 

か、右のようにクッキーを設定した後）（VARSを呼び出すことができます。あなただけのイメージ名を一度使用し、さらにすることができます使用のためにどこかに保存しないようにしたい場合は

<img class="img-responsive" src="'.$image .'" onclick="setcookies(this.src);vars()" /> 

この機能を使用してください：

<script> 
function send(img){ 
    document.getElementById('textinput').value = img.split('/').pop().split('.')[0];; 
} 
</script> 
<img class="img-responsive" src="'.$image .'" onclick="send(this.src);" /> 

あなたの目的に適したものを選択してください。