HTML
Lets assume we have DELETE button (link) on UI:
<a onclick="return desinto.core.openYesNoModal('@Url.Action("DeleteAdvertiserCampaingById", "AdvertiserProfile", new {Id = @campaign.Id})', 'You are about deleting this Campaing, Are You Sure?')" href="#">Delete</a>
Once user clicked on this button we gonna show modal confirmation window (bootstrap) and we have this window like injected Partial View on the same (for example) HTML:
@Html.Partial("YesNoPromtModal")
Partial's HTML:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p id="promptDescription"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="cancelBtn">Close</button>
<a href="" class="btn btn-primary" id="saveChangesBtn">Save Changes</a>
</div>
</div>
</div>
</div>
and finally Java Script for handling close and save changes buttons:
var desinto = {} || desinto;
desinto.core = {} || desinto.core;
(function (ns) {
ns.openYesNoModal = function (linkForYes, description) {
$('#saveChangesBtn').attr('href', linkForYes);
$('#promptDescription').append(description);
$('#myModal').modal('show');
$('#cancelBtn').click(function () {
$('#promptDescription').html('');
$('#saveChangesBtn').removeAttr("href");
});
}
})(desinto.core);
Lets assume we have DELETE button (link) on UI:
<a onclick="return desinto.core.openYesNoModal('@Url.Action("DeleteAdvertiserCampaingById", "AdvertiserProfile", new {Id = @campaign.Id})', 'You are about deleting this Campaing, Are You Sure?')" href="#">Delete</a>
Once user clicked on this button we gonna show modal confirmation window (bootstrap) and we have this window like injected Partial View on the same (for example) HTML:
@Html.Partial("YesNoPromtModal")
Partial's HTML:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p id="promptDescription"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="cancelBtn">Close</button>
<a href="" class="btn btn-primary" id="saveChangesBtn">Save Changes</a>
</div>
</div>
</div>
</div>
and finally Java Script for handling close and save changes buttons:
var desinto = {} || desinto;
desinto.core = {} || desinto.core;
(function (ns) {
ns.openYesNoModal = function (linkForYes, description) {
$('#saveChangesBtn').attr('href', linkForYes);
$('#promptDescription').append(description);
$('#myModal').modal('show');
$('#cancelBtn').click(function () {
$('#promptDescription').html('');
$('#saveChangesBtn').removeAttr("href");
});
}
})(desinto.core);