javascript - 外部ソースからモーダル内部のリンクをロードする

他のソースからコードを読み込むモーダルを使用して動的なウェブサイトを作成しようとしています。この場合、ユーザーはリンクを使用してモーダルビューから製品を選択し、この様な確認ボタンjavascript - 外部ソースからモーダル内部のリンクをロードする

メインページ→ボタン - >モーダルを読み込む（モーダルソースは外部ページ（ "prods.php"））→ボタンを使用してモーダル内の製品を選択→モーダルは今度は "prod_detailメインのページに戻るので、新しいprod_detailをロードすることはできません。

//called when user clicks login 
 
function login() { 
 
    $("#main-username").val($("#modal-username").val()); 
 
    $("#main-result").val($("#modal-result").val()); 
 
    $("#myModal").modal("hide"); 
 
} 
 

 
//called when the modal is closed, logs values grabbed from the modal in login() 
 
$('#myModal').on('hidden', function() { 
 
    console.log('username : '+$("#main-username").val()); 
 
    console.log('result : '+$("#main-result").val()); 
 
})

<!DOCTYPE html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<!-- button to trigger modal --> 
 
<a href="prods.php" data-target="#myModal" data-toggle="modal">remote modal</a> 
 

 
<!-- hidden fields to store modal result in --> 
 
<input type="text" id="main-username"> 
 
<input type="text" id="main-result"> 
 

 
<!-- modal --> 
 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
    <h3 id="myModalLabel">Modal test</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
 
    <button class="btn btn-primary" onclick="login();">Login</button> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

おかげ

出典

2016-08-11 slozano95

あなただけのHTMLをロードしようとしていますあなたのモーダルにソース？ iFrameでその仕事をすることはできますか？ –

iframeを使用... – webdeb

prod_detail.phpを読み込むコードはどこですか？ – Barmar

あなたのメインウィンドウ：

<!-- hidden fields to store modal result in --> 
<input type="text" id="main-username"> 
<input type="text" id="main-result"> 

<script> 
window.setData = function(data) { 
    console.log('data from iframe', data); 
} 
</script> 

<!-- modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <iframe src="/prods.php"></iframe> 
</div>

... prods.php

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal test</h3> 
    </div> 
    <div class="modal-body"> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <button class="btn btn-primary" onclick="window.parent.setData("HI from iframe")">Say Hi to Main Window</button> 
    </div>

出典

2016-08-12 08:55:42 webdeb

javascript - 外部ソースからモーダル内部のリンクをロードする

答えて

関連する問題