改变javascript函数,以便php页面将弹出窗口

时间:2015-07-22 09:04:32

标签: javascript php html

我是Javascript的新手。其实我有一个Javascript函数。

function addHyperlink(val,row){
      var temp = row.id;
            var temp2 = row.assignee;
            var temp3 = row.status;
            var temp4 = row.area;
            var temp5 = row.product;
            var temp1 = '<?php echo $_SESSION['username']; ?>';

            var redirect="edit_comments.php?id=" + temp + "&username=" + temp1 + "&assig=" + temp2 + "&stat=" + temp3 + "&areaa=" + temp4 + "&prod=" + temp5;
return '<a href="' + redirect + '" >Edit Remarks</a>';
}

如果我点击“编辑备注”超链接,它将重定向到带有参数的“edit_comments.php”页面。它工作正常。现在我想更改函数,以便在单击“编辑备注”超链接时,“edit_comments.php”页面将作为弹出窗口而不是新选项卡或新窗口打开。

有没有人可以帮助我改变我需要改变的功能?

提前致谢。

BR, 马哈德夫

4 个答案:

答案 0 :(得分:1)

您可以使用Window.open()函数在新窗口中打开URL,例如

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="inline-link"> <a href="#" data-toggle="cat-75">Category 75</a>
 <a href="#" data-toggle="cat-76">Category 76</a>
 <a href="#" data-toggle="cat-77">Category 77</a>
</div>
<div class="category cat-75">Category 75: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.</div>
<div class="category cat-76">Category 76: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.</div>
<div class="category cat-77">Category 77: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non eius voluptatem quo odio vitae dolor tenetur labore quia totam ipsum ad nulla amet quidem suscipit neque quam porro sunt.</div>

您可以在此找到您可以设置的所有属性

http://www.w3schools.com/jsref/met_win_open.asp

请记住,许多浏览器会尝试阻止此类弹出窗口。

所以在你的代码中你可以

var myWindow = window.open("http://www.yoururl.com", "", "width=200, height=100");

这应该让你朝着正确的方向前进,我认为

答案 1 :(得分:1)

您可以查看对话框解决方案,其中链接在IFRAME元素内呈现。使用对话框,不会创建新窗口或选项卡,您永远不会离开当前页面,因为它将保留在后台。

另外,它不会被任何弹出窗口拦截器捕获。

如果这是你想要的,你可以阅读:How to display an IFRAME inside a jQuery UI dialog

答案 2 :(得分:1)

你可以像这样编码

function windowOpenner(url) {
    var myWindow = window.open(url, "window name", "width=200, height=100");
//you can add element/tags like this or using createElement
myWindow.document.write("<input value='close' type='button' onclick='window.close()' />");
}

function addHyperlink(val,row){

  var redirect="edit_comments.php";

return '<a href="#" onclick="windowOpenner(\''+redirect+'\')">Edit Remarks</a>';

}

document.write(addHyperlink())

答案 3 :(得分:0)

更新: 此方法使用Modal,而不是在弹出窗口中显示结果,它提供了类似的外观和感觉,但也可以更好地控制您可以使用弹出窗口执行的操作保存或关闭弹出窗口中的信息

根据需要使用Ajax:

HTML部分: 第1步:使用display:none属性和页面中心的绝对位置创建隐藏的DIV

Javascript Part: 第2步:在“编辑备注”上添加Click事件,并通过Ajax调用您的php文件,传递适当的参数

第3步:如果Ajax成功,onsuccess:使隐藏的DIV可见,并在DIV内容中添加从Ajax Call获得的响应

-

现在您的修改备注呈现如下:<a href="redirect_url" >Edit Remarks</a>

更改并为其指定ID:<a id="edit_remarks" href="redirect_url" >Edit Remarks</a>

<强> HTML:

<div id="popup" style="display:none;position:absolute;left:35%;top:35%;min-width:80%;min-height:80%;">
<div class="popup_content">
</div>
</div>

<强>的javascript / jquery的

    $('#edit_remarks').click(function(){
     $.ajax({
      method: 'POST',
      url: 'edit_comments.php',
      data: {id: temp, username: temp1 } //(as many variables u want to send)
     }).done(function(msg){
      $('#popup .popup_content').html(msg);
      $('#popup').show();
    });

});