在模态窗口中显示HTML标记 [英] show HTML markup in modal window

问题描述

我有一个JavaScript函数，它接收一个参数，其值是HTML的一个片段。我想在居中的模态对话框中显示此内容（使用关闭按钮）。

I have a JavaScript function that receives a parameter whose value is a fragment of HTML. I would like to show this content in a centered modal dialog (with a close button).

var showContent = function(content) {
    // TODO show content in model dialog
}

我已经在使用JQuery，如果有必要，不介意安装另一个插件，只要它是相当小。我没有使用JQueryUI而宁愿避免它，因为我不会将它用于其他任何事情。

I'm already using JQuery, and don't mind installing another plugin if necessary, as long as it's fairly small. I'm not using JQueryUI and would prefer to avoid it, as I won't be using it for anything else.

推荐答案

这个插件很有前途： SimpleModal （缩小9.6KB）

This plugin looks promising: SimpleModal (9.6KB minified)

您可以使用所选元素的内容或某些HTML作为内容打开它：

You open it with the contents of the selected element, or with some HTML as the content:

$("selector").modal();
$.modal("<p>Hello world</p>");

所以在你的情况下，你可以这样做：

So in your case, you could do this:

var showContent = function(content) {
    $.modal(content);
}

您只需要2种款式：

#simplemodal-overlay { ... }
#simplemodal-container { ... }

它看起来像这样（在演示页面上）：

It looks like this (on the demo page):

这篇关于在模态窗口中显示HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！