Как при AJAX запросе открыть модальное окно

@apande · Регистрация: 19.09.2012

Студворк — интернет-сервис помощи студентам

Запрос

HTML5

                    @Ajax.ActionLink("Детали", "Details", "Admin", new { id = item.ID }, new AjaxOptions()
                                                                                             {
                                                                                                 HttpMethod = "post",
                                                                                                 UpdateTargetId = "Message",
                                                                                                 InsertionMode = InsertionMode.Replace,
                                                                                                 LoadingElementId = "progress",
                                                                                             }) |

Модальное окно

HTML5

<div id="openModal" class="modalDialog">
    <div>
 
        <a href="#close" title="Закрыть" class="close">X</a>
        <div id="Message"></div>
    </div>
</div>

CSS

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}
 
.modalDialog:target {
    display: block;
    pointer-events: auto;
}
 
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
 
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
 
.close:hover { background: #00d9ff; }

стили для окна

Добавлено через 1 час 20 минут
http://www.site.ru/Home/Index/... #openModal
нужно что бы ссылка сформировалась в таком виде

Добавлено через 1 час 25 минут

Javascript

<script type="text/javascript">
    $('.modWindow').click = function () {
        $('#openModal').style.display = "fixed";
    }
</script>

дописал функцию ) не работает(((

@Grey_1 · 13.12.2012, 10:17

Сообщение от apande

дописал функцию ) не работает(((

C#

@Ajax.ActionLink("Детали", "Details", "Admin", new { id = item.ID }, new AjaxOptions()
{
    HttpMethod = "post",
    UpdateTargetId = "Message",
    InsertionMode = InsertionMode.Replace,
    LoadingElementId = "progress",
    OnSuccess = "DetailsOnSuccess"
})

Javascript

<script type="text/javascript">
    function DetailsOnSuccess() {
        $('#openModal').show();
    }
</script>

@apande · 13.12.2012, 14:00 **[ТС]**

Grey_1, открылось НО кнопка закрыть не работает

@apande · 13.12.2012, 16:48 **[ТС]**

а если как обычно вызывать

HTML5

1	<a href="openModal">Показать</a>

то все нормально

Добавлено через 2 часа 14 минут
Проблема как я понял в том что) модальное окно открывается поверх главного окна но при этом работает главная) а он просто сверху нарисован

Добавлено через 3 минуты
в IE он(кнопка закрыть модальное окно) определяется как ссылка но окно не закрывается
прописал такую функцию

Javascript

1
2
3

      $('#close').click = function() {
            $('#openModal').close();
        };

не помогло

Добавлено через 27 минут
С причиной разобрался) оказывается в строке адреса не прописывается #openModal окно не активно)
как это обойти

@Grey_1 · 13.12.2012, 18:15

Сообщение от apande

фигня какая то.

Javascript

1
2
3

$('.modalDialog .close').live('click',function(){
      $(this).parents('.modalDialog:first').hide();
});

@apande · 13.12.2012, 18:48 **[ТС]**

Проблема как я понял в том что) модальное окно открывается поверх главного окна но при этом работает главная) а он просто сверху нарисован

Окно не активно не работает_

Добавлено через 23 минуты

Javascript

$(document).ready(function(){              // по окончанию загрузки страницы
    $('#example-1').click(function(){      // вешаем на клик по элементу с id = example-1
        $(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html               
    }) 
});

вот типо этого что то нужно) но только что бы он добавлял к ссылкам с class userDetail #openModal и все

@apande 18 / 18 / 2 Регистрация: 19.09.2012 Сообщений: 92
	13.12.2012, 14:00 [ТС]	3
	Grey_1, открылось НО кнопка закрыть не работает Миниатюры 0

Опции темы