我有一个Joomla网站，我正在尝试自动打开一个模式窗口，其中的网页的参数在URL中传递。
网站功能如下：旅行负责人查找旅行，他可以通过点击按钮安排领导该旅程。当单击该按钮时，我有一个Php代码，它将行程数据保存到日历数据库并检索行的ID号。下一步是在URL中传递信息后编辑日历组件中的条目。我在Php变量中创建了正确的URL，但我仍然坚持如何使用页面自动打开模态窗口进行编辑。
以下是我的一些代码：
<form action="" method="post">
<input type="submit" name="submit" id="submit" value="Lead This Trip" />
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {...code to save data to calendar}
?>
最后我有一个名为$url的变量，其中包含打开模态网站的正确URL。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*hide the modal container in the beginning */
#modal {
display: none;
}
</style>
<!-- this is where your html will populate -->
<div id="modal"></div>
<form action="" method="post">
<input type="hidden" name="action" id="submit" value="leadteam" />
<input type="submit" name="submit" value="Lead This Trip" />
</form>
<script>
// When the page has loaded
$(document).ready(function() {
/*
If you need to only have it happen on one or more times, but not every time,
you can use a selector such as id="whatever" in your form:
$('#whatever').submit(....etc
or you want perhaps some but not all forms, use class="whatever" in your form:
$('.whatever').submit(....etc
*/
$('form').submit(function(e) {
// prevent the natural submission of the form
e.preventDefault();
// create an ajax instance
$.ajax({
/*
This is the where your edit page is located
If you were to use different forms, you can use the
attr in jquery to grab the action="/whatever.php" in the form
url: $(this).attr('action'),
This will allow you to use this same code without copy pasting
but will then allow for any the forms in your site
*/
url: '<?php $url ?>',
// This function turns your submission to a post string
data: $(this).serialize(),
// Sends as a post
type: 'post',
// If the ajax is successful
success: function(response) {
// Fade in the modal window
$('#modal').fadeIn(function() {
// Populate with the content on your edit page
$(this).html(response);
});
}
});
});
});
</script>
以下是我粘贴到我的Php文件中的相关代码。
答案 0 :(得分：1)
您可能希望使用ajax来完成此任务：
<!-- You need the jQuery library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*hide the modal container in the beginning */
#modal {
display: none;
}
</style>
<!-- this is where your html will populate -->
<div id="modal"></div>
<form action="" method="post">
<input type="hidden" name="action" value="leadteam" />
<input type="submit" name="submit" id="submit" value="Lead This Trip" />
</form>
<script>
// When the page has loaded
$(document).ready(function() {
/*
If you need to only have it happen on one or more times, but not every time,
you can use a selector such as id="whatever" in your form:
$('#whatever').submit(....etc
or you want perhaps some but not all forms, use class="whatever" in your form:
$('.whatever').submit(....etc
*/
$('form').submit(function(e) {
// prevent the natural submission of the form
e.preventDefault();
// create an ajax instance
$.ajax({
/*
This is the where your edit page is located
If you were to use different forms, you can use the
attr in jquery to grab the action="/whatever.php" in the form
url: $(this).attr('action'),
This will allow you to use this same code without copy pasting
but will then allow for any the forms in your site
*/
url: '/leadtrip.php',
// This function turns your submission to a post string
data: $(this).serialize(),
// Sends as a post
type: 'post',
// If the ajax is successful
success: function(response) {
// Fade in the modal window
$('#modal').fadeIn(function() {
// Populate with the content on your edit page
$(this).html(response);
});
}
});
});
});
</script>
答案 1 :(得分：0)
您可以点击一个带有URL的小窗口打开。
<a href="<?php echo $url; ?>" target="popup" onclick="window.open('<?php echo $url; ?>', 'popup', 'width=900px,height=500px,top=20px,left=20px'); return false;">Open modal Window</a>
如果您不想使用这样的Popup，可以使用JQuery UI Dialog小部件和AJAX查询。
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog" style="display: none;">
Loading ...
</div>
<script>
function openModal(){
var modalurl = "<?php echo $url; ?>";
$( "#dialog" ).dialog();
$( "#dialog" ).load( modalurl );
}
</script>
<button onclick="openModal();">Open Modal</button>
请参阅https://jqueryui.com/dialog/和http://api.jquery.com/load/
这里有一个例子https://jsfiddle.net/t1d35ekk/
我不知道模态窗口是否适合你，如果你想告诉浏览器使用PHP打开一个新的URL，你可以设置一个标题：
header( 'Location: '.$url );
die;
修改
也许我理解错了，所以我改变了代码：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Trip" style="display: none;">
Loading ...
</div>
<form action="" method="post">
<input type="hidden" name="action" value="leadteam" />
<input type="submit" name="submit" id="submit" value="Lead This Trip" />
</form>
<script>
$('form').submit(function(e) {
e.preventDefault();
$( "#dialog" ).dialog({
height: 400,
minWidth:400,
close: function( event, ui ) {
window.location.href = "url to open on close";
}
});
$.ajax({
url: '<?php echo $url; ?>',
data: $(this).serialize(),
type: 'post',
success: function(response) {
$( "#dialog" ).html(response);
}
});
});
</script>