如何从函数调用 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">×</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">×</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 模态对话框回发