Плагин Jquery - всплывающее окно Ajax

Question

Я нашел этот отличный плагин для всплывающего окна ajax для MVC под названием SimleModal, но не могу заставить его работать.http://www.ericmmartin.com/projects/simplemodal/ - это веб-сайт.

Я хочу использовать этот плагин для отображения представления (в MVC) при нажатии на ссылку.Может ли кто-нибудь показать мне правильное направление здесь .. спасибо .. пример псевдокода?

Answer 1

Почему бы просто не использовать встроенный jQuery-ui? Просто вызовите $ ('# someDiv'). Dialog (...), чтобы заставить его работать. Затем вы можете использовать сайт ролика тем jQuery, чтобы настроить свой внешний вид - и вы имеете дело с кодом jQuery «базовой линии».

Чтобы сохранить тот же пример синтаксиса, что и Даррин, добавленный выше, для удобства сравнения см. Ниже.

Настройте параметры виджета и загрузите их (вы можете выбрать из целого ряда виджетов - просто диалоговое окно, если хотите, или другие Сделайте это по адресу: http://jqueryui.com/download

Убедитесь, что вы ссылаетесь на файл css, jquery и пользовательский интерфейс jquery. Загрузите пользовательский интерфейс jQuery и поместите папку / images в папку / content, а также файл css.

Убедитесь, что вы ссылаетесь в файлах (я выбрал Google для второго файла - вы можете выбрать свой локальный, если хотите)

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link href="@Url.Content("~/Content/jquery-ui-1.8.13.custom.css")" rel="stylesheet" type="text/css" />

вызвать его так же просто, как:

<div id="result">bipbip</div>
<script type="text/javascript">
    $(document).ready(function () {
    //initialize the dialog
        $("#result").dialog({ width: 400, resizable: false, position: &#39;center&#39;, title: &#39;My Dialog&#39;, autoOpen: false,
         buttons: { "Ok": function() { $(this).dialog("close"); } } 
         });
    });

    $(function () {
        $(&#39;#modal&#39;).click(function () {
            //load the content from this.href, then turn it into a dialog.

            $(&#39;#result&#39;).load(this.href).dialog(&#39;open&#39;);
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "Index2", null, new { id = "modal" })

Подробнее о диалоге см .: http://docs.jquery.com/UI/Dialog

Answer 2

Контроллер:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

Вид:

<script src="@Url.Content("~/Scripts/jquery.simplemodal-1.4.1.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#modal').click(function () {
            $.get(this.href, function (data) {
                $.modal(data, {
                    containerId: 'result'
                });
            });
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { id = "modal" })

<div id="result"></div>

Теперь, когда вы нажмете на ссылку "show modal", AJAX-запрос будет отправлен в действие Modal на HomeController, и результирующее частичное представление будет показано внутри результата div (поэтому не забудьте указать один в ~/Views/Home/Modal.cshtml).

Также убедитесь, что вы изучили раздел примеров в документации для других доступных опций.