How to Open Modal from Function Call Jquery
51,033
I read your code and I found out that you didn't use bootstrap correctly and the also the script you wrote is not correct. Check this out. This might help you.
Script:
$(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>
The fiddle
Author by
sara adly
Updated on April 05, 2020Comments
-
sara adly about 4 years
I have this Modal from Bootstrap When I add button To call it it open successfully, but what I really need is to open this modal from function calling automatically my Experiment is:
<button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline; padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>
MY JavaScript is
function RenewCollectorDatePeriod() { // AreYOuSureRenew(); var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val(); if (EmpID == -1) { alert("please select one ") } else { alert(EmpID); GetCollectorInfo(EmpID); } }
then:
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'); }
and here my modal
<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>
Notice: when I add
$("#EnSureModal").modal('show');
in Document.Ready it appeasrs on page load and appears again on function call , how can I make it appears only in function call -
sara adly about 8 yearsBut I need to fire this event in the function call, not in Document.ready
-
claudios about 8 yearsThen you may call it on the button like onclick="myfunction()" .