使用Jquery打开模式窗口

Open modal window with Jquery

本文关键字：模式 窗口 Jquery 使用      更新时间：2023-09-26

我有一个工作模式，它有以下代码：

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

我创建了一个名为"extendbutton"的div类。我想通过点击该分区来显示模态。

<li class="extend-button"> Extend  </li>
$(document).ready(function(){
    $(".extend-button").mouseup(function(){
        $("#ex1").dialog('open');  
    });
});

这不起作用。

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

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

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

mouseup事件和click事件的区别在于，对于mouseup事件，您可以单击鼠标，按住鼠标，并在释放鼠标以触发mouseup事件之前将鼠标指针拖动到任何位置。单击事件要求mousedown和mouseup事件发生在同一元素上。

通常的预期是，单击需要mousedown和mouseup事件。

HTML中的以下更改让我度过了一天。不需要jquery。

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

首先，确保在页面的<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>
相关文章：