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

Open a modal dialog box, containing dynamic data on table cell click

本文关键字：表格 单击 包含 单元格 数据 动态 对话框 模式 一个      更新时间：2023-09-26

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

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

将<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>

我试着打电话给：

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";
};

但我不再以这种方式看到弹出窗口。

我最终想"弹出"成为一个模式对话窗口，它将显示在表格的顶部。目前，由于它是在表上方定义的，所以它只是在显示时向下推表。

编辑：感谢您的帮助。@carlosHT和@TimeDead。两种解决方案都有效，都教会了我很多。我选择了carlosHT的解决方案，因为它是一个较小的实现。我唯一需要添加的是：

.ui-dialog
{
    clear: both;
}

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

这里有一个使用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>

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

您也可以在没有jQuery UI的情况下实现这一点（因为当时它对我不起作用，尽管我正在慢慢地转换到它）

您可以使用jQuery和类似的JS来实现一个功能模式：（从外部文件调用css以设置模态样式）

在文件中设置函数文字：

(function($) {
 }(jQuery)

在我们的函数文本中，我们将让它构建我们的模态（这也在CSS中添加了JS，您可以手动设置任何位置，这是为了示例）

设置默认参数并执行我们的其他构建器功能：

$.fn.siteModal = function(prop) {
options = $.extend({
            height: "500",
            width: "500",
            title: "default modal box",
            description: "This is a place holder Modal to put in our things into.",
            top: "20%",
            left: "30%",
        }, prop);
    };  
return(
            add_block_page(),
            add_popup_box(),
            $('.modalBox').fadeIn()
        );
        return this;
    };

这个家伙将设置一些默认参数，我们的模态将使用这些参数，这样它就知道显示的大小和方式。

现在我们设置我们的建设者功能

function add_block_page() {
        var block_page = $('<div class="blockPage"></div>');
        $(block_page).appendTo('body');
    }

这个家伙将创建一个新的div，它将在我们的modals背景的网页上创建一个半透明的黑色覆盖层，然后将其附加到正文中，以便显示。

现在我们要添加弹出模式本身：

function add_popup_box() {
        var pop_up = $('<div class="modalBox"><a href="#" class="closeModal">X</a><div class="innerModal"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
        $(pop_up).appendTo('.blockPage');
        $('.closeModal').click(function() {
            $('.blockPage').fadeOut().remove();
            $(this).parent().fadeOut().remove();
        });
    }

这个家伙将为模态创建我们的div（一个外部div，然后是一个内部div，内部div将包含我们的内容），这也设置了我们的X按钮，这样当你点击X时，模态将关闭并正确返回网页。

我的HTML看起来有点像：

<a href="#" onclick="$.fn.siteModal(this)" class="termsLink">Terms</a>

所以现在当"；术语"；点击链接就会打开一个新的模式！（这就是我现在所说的模态）

这是一种非常基本的方法，如果你愿意，你必须再次在外部css中构建你的样式，或者你可以让jquery在构建这个模态时添加css。选择权在你。希望这能有所帮助。

编辑

我有一个CSS函数，可以为我们的模态框创建外观，你可以把这个家伙扔进去：

function add_styles() {
        /*Block page overlay*/
        var pageHeight = $(document).height();
        var pageWidth = $(window).width();
        $('.blockPage').css({
            'position': 'absolute',
            'top': '0',
            'left': '0',
            'background-color': 'rgba(0,0,0,0.6)',
            'height': pageHeight,
            'width': pageWidth,
            'z-index': '10'
        });
        $('.modalBox').css({
            'position': 'absolute',
            'left': options.left,
            'top': options.top,
            'display': 'none',
            'height': options.height + 'px',
            'width': options.width + 'px',
            'border': '1px solid #fff',
            'box-shadow': '0px 2px 7px #292929',
            '-moz-box-shadow': '0px 2px 7px #292929',
            '-webkit-box-shadow': '0px 2px 7px #292929',
            'border-radius': '10px',
            '-moz-border-radius': '10px',
            '-webkit-border-radius': '10px',
            'background': '#f2f2f2',
            'z-index': '50',
        });
        $('.innerModal').css({
            'background-color': '#fff',
            'height': (options.height - 50) + 'px',
            'width': (options.width - 50) + 'px',
            'padding': '10px',
            'margin': '15px',
            'border-radius': '10px',
            'color' : '#5a5a5a',
            'text-align' : 'center',
            '-moz-border-radius': '10px',
            '-webkit-border-radius': '10px'
        });
    }

并将其放入prop函数的调用中：add_styles()

相关文章：