Javascript 打开一个模态对话框，包含有关表格单元格单击的动态数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26847017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open a modal dialog box, containing dynamic data on table cell click
提问by tjheslin1
I'm trying to achieve as the title suggests. Currently I can display the contents of a <div>using:
我正在努力实现标题所暗示的。目前我可以显示使用的内容<div>：
document.write("<table><tr>");
...
document.write("<td onclick=\"window.location.href='#popup'\" ... >" + name + "\"</td>);
With the <div>defined as: (where I'm trying to use data-name)
随着<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>
I have tried instead calling:
我尝试改为调用：
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";
};
but I no longer see the popup this way.
但我不再以这种方式看到弹出窗口。
I would eventually want to "popup" to be a modal dialogue window which will display on top of the table. Currently as it's defined above the table it just pushes the table down when displayed.
我最终希望“弹出”成为一个模式对话窗口，它将显示在表格的顶部。目前，正如它在表格上方定义的那样，它只是在显示时将表格向下推。
Edit:Thanks for the fantasic help. Both @carlosHT and @TimeDead. Both solutions work and both taught me a lot. I've gone for carlosHT's solution as it's a smaller implementation. The only addition I had to add was:
编辑：感谢您的帮助。@carlosHT 和@TimeDead。两种解决方案都有效，并且都教会了我很多东西。我选择了 carlosHT 的解决方案，因为它是一个较小的实现。我必须添加的唯一补充是：
.ui-dialog
{
clear: both;
}
This stops the dialog window from having a very tall titlebar.
这会阻止对话框窗口具有非常高的标题栏。
采纳答案by carlosHT
Here's an alternative using jQuery and jQueryUI:
这是使用 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>
EXAMPLE: http://jsfiddle.net/xaqtawog/1/
回答by dhershman
You can achieve this also without jQuery-UI (as it did not work for me at the time though I am slowly changing over to it)
你也可以在没有 jQuery-UI 的情况下实现这一点（因为它当时对我不起作用，尽管我正在慢慢转向它）
You can achieve a functioning modal with jQuery, and JS like so: (Call your css from an external file to style the modal)
您可以使用 jQuery 和 JS 实现功能正常的模态，如下所示：（从外部文件调用您的 css 以设置模态样式）
Setup a function literal in a file:
在文件中设置函数文字：
(function($) {
}(jQuery)
Inside our fucntion literal we will have it build our modal (This also has JS add in the CSS which you can manually set anywhere this is for the sake of example)
在我们的函数文字中，我们将让它构建我们的模态（这也有 JS 添加到 CSS 中，您可以在任何地方手动设置这是为了示例）
setup the default parameters and execute our other builder functions:
设置默认参数并执行我们的其他构建器函数：
$.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;
};
This guy here is going to setup some default parameters that our modal is going to use so it knows what size and how to display.
这里的这个人将设置一些我们的模态将要使用的默认参数，以便它知道什么大小以及如何显示。
Now we setup our builder functions
现在我们设置我们的构建器函数
function add_block_page() {
var block_page = $('<div class="blockPage"></div>');
$(block_page).appendTo('body');
}
this guy here is going to create a new div that will create a lightly transparent black overlay on the webpage for our modals background and then append it to the body so it can be displayed.
这里的这个家伙将创建一个新的 div，它将在网页上为我们的模态背景创建一个浅透明的黑色叠加层，然后将其附加到正文中以便显示。
Now we are going to add the popup modal itself:
现在我们要添加弹出模式本身：
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();
});
}
This guy is going to create our divs for the modal (an outer and then an inner div the inner will contain our content) this also setups our X button so that when you click X the modal will close out and bring you back to the webpage correctly.
这家伙将为模态创建我们的 div（一个外部，然后一个内部 div，内部将包含我们的内容）这也设置了我们的 X 按钮，以便当您单击 X 时，模态将关闭并带您回到网页正确。
My HTML looks a little like this:
我的 HTML 看起来有点像这样：
<a href="#" onclick="$.fn.siteModal(this)" class="termsLink">Terms</a>
So now when the "terms" link is clicked a new modal will open up! (this is how I call the modal for now)
所以现在当点击“条款”链接时会打开一个新的模式！（这就是我现在调用模态的方式）
This is a very basic way to do it, and once again you have to build your styles inside an external css if you'd like or you can have jquery add css as it builds this modal. The choice is yours. Hope this helps.
这是一种非常基本的方法，如果您愿意，您必须再次在外部 css 中构建样式，或者您可以让 jquery 在构建此模式时添加 css。这是你的选择。希望这可以帮助。
EDIT
编辑
I have a CSS function that creates the look for our modal box you can throw this guy in there:
我有一个 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'
});
}
And put this into your calls at the prop function: add_styles()
并将其放入 prop 函数的调用中： add_styles()
