Question

我有一个工作模式，其代码如下：

<!-- 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>

我创建了一个名为“extend-button”的div类。我想通过点击该div来显示模态。

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

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

这不起作用。

Answer 1

考虑使用click()功能。否则一切都很好，假设dialog('open')按预期工作。添加控制台日志以确保单击事件处理程序可以帮助您进行调试。

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

Answer 2

您需要先将所有jquery代码移动到<script>标记中。然后将$(".extend-button").mouseup替换为$(".extend-button").click。

mouseup事件和click事件之间的区别在于，使用mouseup事件，您可以单击鼠标，按住鼠标，然后随地拖动鼠标指针在释放鼠标以触发mouseup事件之前。点击事件要求在{strong>相同的元素上发生mousedown和mouseup事件。

正常的期望是点击需要mousedown和mouseup事件。

Answer 3

HTML中的以下更改使我的一天成为现实。不需要jquery。

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

Answer 4

首先，确保在页面的<head>中包含JQuery UI库和CSS文件。

<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>

用Jquery打开模态窗口

4 个答案: