Блог

Главная - Вопросы по программированию - Как я могу сгенерировать динамическое всплывающее окно с помощью html?

Как я могу сгенерировать динамическое всплывающее окно с помощью html?

#jquery #html #asp.net #asp.net-mvc #asp.net-mvc-4

#jquery #HTML #asp.net #asp.net-mvc #asp.net-mvc-4

Вопрос:

У меня есть всплывающее окно jquery :

    <div id="dialog-modal" title="Test">
    <p>Test</p>      
</div>

   $("#dialog-modal").dialog({
        autoOpen: false,
        width: 300,
        height: 250,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $("#modal-opener").click(function () {       
        $("#dialog-modal").dialog("open");

    });

И у меня есть HTML-код из базы данных. Пример: 

 ViewBag.Test = "<table><tr><td>Test</td></tr><tr><td>Test 123</td></tr>";

Итак, я хочу, чтобы этот HTML отображался во всплывающем окне

Как я могу сделать?

Спасибо.

Комментарии:

1. Просто замените <p>Test</p> на @Html.Raw(ViewBag.Test)

2. Я пробовал, но другие элементы html не загружаются

3. Какие еще элементы? Весь ваш вопрос указывает на то, что вы хотите отобразить значение ViewBag.Test

4. да, но я хочу, только когда я нажимаю, отображать значение ViewBag.Test во всплывающем окне

5. Почему — оно изначально скрыто!

Ответ №1:

Необходимо использовать .html() перед открытием.

 $("#modal-opener").click(function () {       
     $("#dialog-modal").html("<b>New HTML</b>");                               
     $("#dialog-modal").dialog("open");
});

Комментарии:

1. @FerhatArslan: Нет проблем, рад помочь

Ответ №2:

Попробуйте что-нибудь вроде этого:

 $("#dialog-modal").html('<table><tr><td>Test</td></tr><tr><td>Test 123</td></tr>');
// It will append the passed html to the popup div

$("#dialog-modal").dialog({
    // this will open the popup with the appended html
});