jquery 我如何使这个窗体弹出当用户单击一个按钮？

tgabmvqs 于 2023-03-01 发布在 jQuery

关注(0)|答案(2)|浏览(189)

我有这个jquery脚本代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){
        alert("welcome");
          $("#AddFieldButton").click(function(){
                $("#AddFieldForm").css("visibility", "visible");
                $("#AddFieldForm").css("opacity", "1");
             });
        });
    </script>
    <link rel="stylesheet" type="text/css" href="../resources/css/ownerMainScreen.css?version=70">
    <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
    <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

这张表格

<form class="AddForm" id="AddFieldForm" method="post" action="AddField.htm">
        <label>Thêm sân</label>
        <br>
        <input type="text" placeholder="ID sân" name="ID"/>
        <label>Số người đá:</label>
        <input type="radio" name="SLNGUOIDA" checked="checked" class="spread" value="5">
        <label class="spread">5</label>
        <input type="radio" name="SLNGUOIDA" class="spread" value="7">
        <label class="spread">7</label>
        <input type="radio" name="SLNGUOIDA" class="spread" value="11">
        <label class="spread">11</label>
        <input type="text" placeholder="Giá tiền" name="GIA"/>
        <input type="submit" value="Thêm"/>
        <button id="ExitAddField" type="button">Hủy</button>
    </form>

这个按钮，我希望它使窗体弹出每当我点击它

<div id="Fields" class="Container">
        <button class="AddButton" id="AddFieldButton">Thêm sân</button>
        <input class="SearchBar" type="text" placeholder="Search.." name="search"/>
        <img class="SearchIcon" alt="Tìm kiếm" src="../resources/Icons/SearchIcon.png" width="30" height="30">
</div>

然后，该按钮将激活jquery代码以更改表单的css

.AddForm{
    display:grid;
    background-color:rgb(200,230,200);
    left:50%;
    top:50%;
    transform: translate(-50%,-50%); 
    width: 45vw;
    height:70vh;
    position: fixed;
    border-radius:20px;
    border-color:#036932;
    border-style: solid;
    border-width:2px; 
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 10% 23.3% 10% 23.3% 10% 23.3%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

我试着在脚本的开头放一个欢迎提示，它确实发出了提示，所以我知道它确实接受了脚本。我按ID选择元素，所以它也不能是选择器，所以我不知道为什么它不起作用。

jquery

来源：https://stackoverflow.com/questions/75598662/how-do-i-make-this-form-pop-up-when-user-click-a-button

2条答案

按热度按时间

dced5bon1#

根据您提供的代码，ID为“AddFieldForm”的窗体似乎最初是隐藏的，而您希望在单击ID为“AddFieldButton”的按钮时显示它。但是，您的代码只设置窗体的CSS属性以使其可见，而实际上并不显示它。
您可以尝试修改脚本代码，使用show（）函数显示表单，而不是设置CSS属性：

$(document).ready(function(){
  alert("welcome");
  $("#AddFieldButton").click(function(){
    $("#AddFieldForm").show();
  });
});

这将使表单在单击按钮时可见。您还可以在click函数的末尾添加return false语句，以防止默认的表单提交行为：

$(document).ready(function(){
  alert("welcome");
  $("#AddFieldButton").click(function(){
    $("#AddFieldForm").show();
    return false;
  });
});

这将防止在单击按钮时提交表单，并允许表单保持可见。

赞(0）回复(0）举报 2023-03-01

bzzcjhmw2#

试试这个

(function($) {
        $.fn.invisible = function() {
            return this.each(function() {
                $(this).css("visibility", "hidden");
            });
        };
        $.fn.visible = function() {
            return this.each(function() {
                $(this).css("visibility", "visible");
            });
        };
    }(jQuery));
    
    
$("#AddFieldButton").click(function(){
   
    $("#AddFieldForm").invisible();
  });

或者，创建一个函数，并在单击按钮时调用它。

function handleClick(){
     $("#AddFieldForm").invisible();
    }

然后在按钮的click事件上调用此函数。

<button class="AddButton" id="AddFieldButton" onClick="handleClick()">Thêm sân</button>

希望这应该起作用：）

赞(0）回复(0）举报 2023-03-01

我来回答

jquery 我如何使这个窗体弹出当用户单击一个按钮？

2条答案

相关问题

热门标签

最新问答