Question

我正在努力实现标题所暗示的目标。目前，我可以使用

显示<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;
}

这会阻止对话框窗口显示非常高的标题栏。

Answer 1

你也可以在没有jQuery-UI的情况下实现这一点（因为当时我不适合我，虽然我正在慢慢转向它）

您可以使用jQuery实现一个正常运行的模式，而JS就像这样：（从外部文件调用你的css来设置模态的样式）

在文件中设置函数文字：

(function($) {

 }(jQuery)

在我们的fucntion文字中，我们将构建我们的模态（这也在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，它会在网页上为我们的模态背景创建一个透明的黑色覆盖，然后将其附加到身体上以便显示。

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

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，内部将包含我们的内容）这也设置我们的X按钮，这样当你点击X时，模态将关闭并带你回来到网页正确。

我的HTML看起来有点像这样：

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

所以现在点击“条款”链接时会打开一个新模式！（这就是我现在称之为模态的方式）

这是一种非常基本的方法，如果您愿意，您还需要在外部CSS中构建样式，或者您可以在构建此模式时使用jquery add 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' }); }

并将其放入道具功能的调用中：add_styles()

Answer 2

这是使用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/

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

2 个答案: