Открыть модальное окно с Jquery

-1

У меня есть рабочая модальность, которая имеет следующий код:Открыть модальное окно с Jquery

<!-- modal code --> 
<a href="#follow" rel="modal:open"> Follow </a> 
<!-- modal window --> 
<div id="ex1" style="display:none"> 
    <p> Please <%= link_to "Login", new_user_session_path %> </a> to Extend. </p> 
</div>

Я сделал класс Div под названием «продлить-кнопку». Я хочу показать модальный, нажав на этот div.

<li class="extend-button"> Extend </li> 

$(document).ready(function(){ 
    $(".extend-button").mouseup(function(){ 
     $("#ex1").dialog('open'); 
    }); 
});

Это не работает.

источник

2014-11-11 Reza

Я решил это, изменив код html. Extend – Reza

Рассмотрите возможность использования функции click(). В противном случае все выглядит хорошо, если dialog('open') работает по назначению. Добавьте консольный журнал, чтобы обработчик события click работал, чтобы помочь вам отлаживать.

$('.extend-button').click(function (e) { 
    console.log('clicked'); 
    $("#ex1").dialog('open'); 
});

источник

2014-11-11 22:08:58 elzi

Спасибо большое, я сделал это несколько иначе. Extend – Reza

Отлично, либо работает! Если у вас нет других вопросов, пожалуйста, подумайте над тем, чтобы этот вопрос был задан как разрешенный. – elzi

Вы должны сначала переместить все свои коды Jquery в <script> тега. Затем замените $(".extend-button").mouseup на $(".extend-button").click.

Разница между mouseup событием и click событием является то, что, с mouseup события, вы можете нажать кнопку мыши, удерживая ее, перетащите указатель мыши любого и везде, прежде чем отпустить кнопку мыши, чтобы вызвать mouseup события. Событие клика требует, чтобы событие и mouseup произошло на том же.

Нормальное ожидание состоит в том, что для щелчка требуется как событие , так и mouseup.

источник

2014-11-11 22:13:11

Следующее изменение в HTML сделало мой день. Нет jQuery.

 <a href="#ex1" rel="modal:open" class="extend-button"> Extend </a>

источник

2014-11-11 22:18:52 Reza

Я думаю, для вас все еще важно заменить 'mouseup' на' click'. Они подразумевают разные вещи и могут вызвать у вас головную боль позже. Взгляните на мой ответ за их разницу. –

Прежде всего, убедитесь, что вы в том числе библиотеки и CSS файл JQuery UI в <head> вашей страницы.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

HTML:

<!-- modal code --> 
<a href="#follow" rel="modal:open"> Follow </a> 
<!-- modal window --> 
<div id="ex1" style="display:none"> 
    <p> Please <%= link_to "Login", new_user_session_path %> </a> to Extend. </p> 
</div> 

<li class="extend-button"> Extend </li>

Вы также должны убедиться, что вы оборачивать код в <script> тегов. Как упоминалось в @elzi, лучше использовать событие .click().

<script type="text/javascript"> 
$(function(){ 
    $(".extend-button").on("click", function(){ 
     $("#ex1").dialog('open'); 
    }); 
}); 
</script>

источник

2014-11-11 22:22:04 EternalHour

Открыть модальное окно с Jquery

ответ

Смежные вопросы