показать HTML-разметку в модальном окне - PullRequest
Новая
       14

показать HTML-разметку в модальном окне

2 голосов
/ 27 января 2012

У меня есть функция JavaScript, которая получает параметр, значение которого является фрагментом HTML.Я хотел бы показать это содержимое в центрированном модальном диалоге (с кнопкой закрытия).

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

Я уже использую JQuery и не возражаю установить другой плагин при необходимости, если он достаточно маленький.Я не использую JQueryUI и предпочел бы избегать этого, так как я не буду использовать его ни для чего другого.

Ответы [ 3 ]

2 голосов
/ 27 января 2012

Вы можете сделать это без какого-либо плагина ... Просто используйте это.

HTML: 

<div class="overlay-div">
<div class="modal-div">
           <div style="float:right" class="x-button">X</div>
</div>
</div>

CSS: 

        .overlay-div
        {
            display:none;
            z-index:100;
            background-color:rgba(0,0,0,0.44);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000)\9; //for IE    
            position:absolute;
            top:0;
            left:0;

        }

        .overlay-div .modal-div
        {
             width:500px;
             height:480px;
             position:fixed;
             top:50%;
             left:50%;
             margin:-240px 0 0 -250px; //must be proportional to width and height
             padding:25px;
             background:#fff;
             z-index:1;
        }

        .x-button
        {
             cursor:pointer;
        }

Javascript: 

var showContent = function(content) {
    $(".overlay-div").width($("html").width());
    $(".overlay-div").height(getDocHeight());
    $(".modal-div").append(content);
    $(".overlay-div").show();
}

$("#x-button").click(function () {
            $(".overlay-div").hide();
        });

//Cross-browser way to get page height
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
            );
}
2 голосов
/ 27 января 2012

Этот плагин выглядит многообещающе: SimpleModal (минимизировано 9,6 КБ)

Вы открываете его с содержимым выбранного элемента или с некоторым HTML в качестве содержимого: 

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

Итак, в вашем случае вы можете сделать это: 

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

Вам нужно только 2 стиля: 

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

Это выглядит так (на демонстрационной странице):

SimpleModal example

0 голосов
/ 27 января 2012

Вы можете проверить ссылку ниже.

http://www.queness.com/resources/html/modal/jquery-modal-window.html

...