如何从函数调用 Jquery 打开模态

Posted

技术标签:

【中文标题】如何从函数调用 Jquery 打开模态【英文标题】:How to Open Modal from Function Call Jquery 【发布时间】:2016-08-05 21:52:41 【问题描述】:

我有这个来自 Bootstrap 的 Modal 当我添加 按钮调用它打开成功, 但我真正需要的是从函数调用中自动打开这个模式 我的实验是:

     <button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
 padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>

我的 javascript

 function RenewCollectorDatePeriod() 
         //   AreYOuSureRenew();        
            var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val();
            if (EmpID == -1) 
                alert("please select one ")
            
            else 
               alert(EmpID);
              GetCollectorInfo(EmpID);       
                    
        

然后:

        function GetCollectorInfo(EmpID) 
       //     AreYOuSureRenew();
            $.ajax(
                type: "POST",
                url: "UnloadingCalendar.aspx/GetCollectorInfo",
                data: JSON.stringify( EmpID: EmpID ),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) 
                    alert(result.d);
                    AreYOuSureRenew();
                    ,
                error: function (msg) 
                    alert(msg.d);
                ,
                complete: function () 

                
            )
        


    function AreYOuSureRenew() 
        alert("opened");
        $('#EnsureModal').modal('show');
    

这里是我的模态

    <div class=" modal fade" id="EnSureModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Do ypu need change </h4>
                </div>
                <div class="modal-body">
                    <p>Are u sure from </p>
                    <label id="FromDate"></label>
                    <p>To</p>
                    <label id="ToDate"></label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">no</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
                </div>
            </div>
        </div>
    </div>

注意:当我在 Document.Ready 中添加 $("#EnSureModal").modal('show'); 时,它会在页面加载时出现并再次出现在函数调用中,我怎样才能让它只出现在函数调用中

【问题讨论】:

什么时候给AreYOuSureRenew打电话? 来自另一个函数@RayonDabre 的 ajax 成功 调用函数AreYOuSureRenew(); @saraadly,请忽略我的评论,我浏览了您上面的第二条评论并很好地理解了您的情况。 控制台有错误吗? 【参考方案1】:

我阅读了您的代码,发现您没有正确使用引导程序,而且您编写的脚本也不正确。看一下这个。这可能会对您有所帮助。

脚本:

$(document).ready(function()
    $("#fireme").click(function()
        $("#EnSureModal").modal();
    );
);

html

<button id="fireme" class="btn btn-default">Fire me up!</button>
<div class="modal fade" id="EnSureModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Do ypu need change </h4>
            </div>
            <div class="modal-body">
                <p>Are u sure from </p>
                <label id="FromDate"></label>
                <p>To</p>
                <label id="ToDate"></label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">no</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
            </div>
        </div>
    </div>
</div>

fiddle

【讨论】:

但是我需要在函数调用中触发这个事件,而不是在 Document.ready 中 然后你可以在按钮上调用它,比如 onclick="myfunction()" 。

以上是关于如何从函数调用 Jquery 打开模态的主要内容,如果未能解决你的问题,请参考以下文章

通过调用 ASP.NET 按钮单击从 jQuery 模态对话框回发

通过普通函数而不是 jQuery 对象方法调用打开 Bootstrap 模式

从模态对原始组件反应本机调用函数

模态对话框如何调用父窗口的JS函数?

如何在“X”秒后进行 jquery 函数调用

如何从 Swift 调用 jquery 函数?