打开一个模式对话框,其中包含表格单元格上的动态数据

Question

打开一个模式对话框,其中包含表格单元格上的动态数据

正如标题所示,我正在努力实现.目前我可以显示使用的内容<div>:

document.write("<table><tr>");
...
document.write("<td onclick=\"window.location.href='#popup'\" ... >" + name + "\"</td>);

Run Code Online (Sandbox Code Playgroud)

随着<div>定义为:(这里我试图用data-name)

<div id="popup" data-name="name" class="dialog">

    <a href="#close"><img src="..." alt="..." width="166" height="104" align="left" /></a>
    <p>                
        Hello (dynamic name here)!     
    </p>            
</div>

Run Code Online (Sandbox Code Playgroud)

我尝试过调用:

document.write("<td onclick=\"popup(" + name + ")\" class=\"programme\">" + name + "</td>");

function popup(movieName)
{
    var pop = document.getElementById("popup"); 
    pop.setAttribute("data-movie", movieName);

    document.location.href = "#popup";
};

Run Code Online (Sandbox Code Playgroud)

但我不再这样看弹出窗口了.

我最终想要"弹出"成为一个模态对话窗口,它将显示在表格的顶部.目前正如它在表格上方所定义的那样,它只是在显示时将表格向下推.

编辑:感谢您的幻想帮助.@carlosHT和@TimeDead都是.两种解决方案都有效,并且都教会了我很多.我已经选择了carlosHT的解决方案,因为它是一个较小的实现.我必须添加的唯一补充是:

.ui-dialog
{
    clear: both;
}

Run Code Online (Sandbox Code Playgroud)

这会阻止对话框窗口具有非常高的标题栏.

Answer 1

car*_*sHT 3

这是使用 jQuery 和 jQueryUI 的替代方案：

<html>
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"/>
        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

        <style>
            #popup{
                display: none;
                border: 1px solid black;
            }

            .cell-which-triggers-popup{
                cursor: pointer;    
            }

            .cell-which-triggers-popup:hover{
                background-color: yellow;    
            }
        </style>
    </head>

    <body>
        <div id="popup" class="dialog">
            <a href="#close"><img src="http://bit.ly/1qAuZh3" alt="..." width="166" height="104" align="left"/></a>
            <p></p>            
        </div>

        <table border="1">
            <tr>
                <td class="cell-which-triggers-popup">exampleName</td>
            </tr>
        </table>
    </body>
</html>

<script>
$( document ).ready(function() {
    $(document).on("click", ".cell-which-triggers-popup", function(event){
        var cell_value = $(event.target).text();
        showPopup(cell_value)    
    });

    function showPopup(your_variable){
        $("#popup").dialog({
            width: 500,
            height: 300,
            open: function(){
                $(this).find("p").html("Hello " + your_variable)
            }
        });
    }
});
</script>

Run Code Online (Sandbox Code Playgroud)

示例： http: //jsfiddle.net/xaqtawog/1/

归档时间：	11 年，6 月前
查看次数：	19699 次
最近记录：	11 年，6 月前