2016-07-15 5 views
0

私は自分のページのjqueryで設計されたモデルボックスを持っていますが、このモーダルショーを完全な動的PHPページにすることは可能でしょうか?完全なPHPページを表示するにはどうすればよいですか?

+0

コードはどこにありますか?これまでに試したことをお見せできますか? –

+0

あなたは、** modal **ボックスにphpで生成されたページを表示したいのですか? –

+0

はい、「ajax」でコンテンツを読み込む必要があります。 – ymas

答えて

1

関数を使用できます。これは非常に使いやすく、よく文書化されています。http://api.jquery.com/load/。選択された要素、例えばあなたのモーダルのボディに、URLを呼び出すだけでページが読み込まれます。モーダルボックスの

+0

これは私の意見では正解です。私たちは常にiframeを避けるべきです。 'load()'関数を使うと、jQueryで選択したDOM要素にPHPドキュメントを読み込むことができます。 また、Ajaxを使用すると、JSONを返すPHPドキュメントから情報を取得できます。 – SrAxi

+0

あなたは部分的なテンプレートを返すことができます、そのとても素敵で簡単です!そして、コールバックを使用してください! –

+0

はい! PHPとハンドルバーを組み合わせた 'load()'を使っています! – SrAxi

0

使用はiframe

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Trigger Modal in iFrame</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      <iframe src="/user/dashboard" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

のiframe srcがあなたの動的なページを持つことになります。

+0

私はIframeの使用をお勧めしません –

0

bootstrap.cssとbootstrap.js

などを含める:,

<a data-toggle="modal" href="your_url content to show" data-target="#myModal">Click</a> 

<div id="#myModal"></div> 

Reference- http://getbootstrap.com/javascript/#modals

0

使用このようなjQueryのload()

jQueryの一部

<!-- Load jQuery --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<!-- A button on the page --> 
<body> 
    <button>Fetch Page</button> 
</body> 

<!-- 
1. Attach click event to 'button' with jQuery on() 
2. Create a modal box dynamically with append() 
3. Load 'the_dynamic_page.php' with jQuery load() 
--> 
<script> 
$('body').on('click','button',function(){ 
    $('body').append("<div id='modal_box' style='border:1px solid #999;position:fixed;top:50%;left:45%;padding:0 0.75%;font-family:Calibri,Candara,Arial;'></div>"); 
    $('#modal_box').load('the_dynamic_page.php'); 
}); 
</script> 

このページでは、単にのようなテキスト表示することができ

the_dynamic_page.php「モーダルボックスでイムを!」またはdbからの何か。

関連する問題