使用不同的链接创建模态

时间:2014-01-17 04:07:28

标签: javascript html css popup modal-dialog

我正在尝试使用不同的新闻文章创建一个页面(每个文章页面都指向一个创建的不同页面)。使用modal我可以创建一个环境,页面弹出窗口在同一个窗口而不是在另一个窗口中打开吗?如果是,有人可以帮我解释代码和示例吗?

1 个答案:

答案 0 :(得分:0)

是的,使用jQuery模式对话框。您可以为每篇文章提供一个链接或按钮,当它被点击时,打开一个带有文章文本的模态对话框。

有关工作示例,请参阅此JSFiddle

<div class='article' id="article1">
<p>This is article 1, etc...</p>
</div>
<button id='article1Button'>Article 1...</button>

<div class='article' id="article2">
<p>This is another article...</p>
</div>
<button id='article2Button'>Article 2...</button>

和javascript:

$(document).ready(function(){
$(".article").dialog({
        autoOpen : false,
        resizable : false,
        width : 400,
        height: 400,
        modal : true,
        buttons: {
            "Close" : function(){
                $( this ).dialog( "close" );
            }
        },
        close : function(ev, ui) {
            return true;    
        }
    });
$('#article1Button').click(function(){
     $("#article1").dialog("open");
})
$('#article2Button').click(function(){
     $("#article2").dialog("open");
})
});