I have a page with several buttons that all open the same modal using Magnific Popup. However I need to customize the popup for each button according to the calling button's data- attributes.
So I need a way to call a function when the popup pops :-) and have access to the calling button.
The Magnific popup initialization is part of the FE's js file, and I'm working in the module's js file. So I'm trying to minimize changes to the FE's js!
Is this possible? How can I achieve this?
CHECK UPDATE BELOW:
This is what I did:
Did not touch the FE's js which initialized any .my-modal class
I edited these button's classes from .my-modal into .my-custom-modal (for example)
Initialized magnificpopup on .my-custom-modal and added the following to trigger an event before opening the modal:
$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true
}).on('mfpBeforeOpen', function () {
// 'this' is the current button that triggered the modal
console.log(this);
});
UPDATE
The above works but the 'this' var wasn't returning the actual button but seems like the first button in the page.
The below should work correctly:
$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
open: function () {
var mp = $.magnificPopup.instance,
btn = $(mp.currItem.el[0]);
//btn is the actual button being clicked
console.log(btn);
}
}
});
Related
The scenario I'm trying to solve is to disable that the escape-button closes the dialog AFTER the modal has been instaniated (the dialog is set to a loading state). So in other words after I have instaniated my modal like this:
(this.$el).modal("show");
The user presses a submit button and the dialog is set to a loading state and I want to disable the escape-button since the user should not be able to close the dialog in this state.
I have tried this:
(this.$el).modal({ keyboard: false });
But it does not work, it seems that Bootstrap only reads those options when it instaniates the modal dialog...
So my question is if it is possible to get a hold of the actual bootstrap modal-instance to be able to change the options-object? According to the documentation it should be possible (or have I misunderstood the docs?), but I cannot figure out how.
Here is what it says in the documentation (http://getbootstrap.com/javascript/):
If you'd like to get a particular plugin instance, retrieve it directly from an element:
$('[rel="popover"]').data('popover').
Any ideas?
Ok, I figured out how to get ahold of the modal dialog instance after some experimentation:
var bootstrapModalInstance = this.$el.data("bs.modal");
And then I could set the options on the instance like this:
bootstrapModalInstance.options.keyboard = !this.model.isSyncing;
Sadly enough, this did not solve the problem since the escape-key-event-listener is setup during the modal instaniation like this:
From bootstrap.js
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) { // The event listener is setup on initalization
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide() // !!! Does not check the instance options.keyboard flag status, so I had to add && this.options.keyboard here
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}
And as I wrote in the code comment above adding the instance options.keyboard check in the event listener solved the issue.
I have a href attribute defined like this:
<img src="~/Content/img/suggest1.png" class="need-buttons pull-right">
And the point is that, when it is clicked, I want to display a pop-up or dialog box in my app, which will ask a question to the user, and will have a yes or no as an answer. And then according to the pressed button, I want to navigate to a different view. I'm pretty sure I need to use jQuery UI for creating the dialog, but how can create it with buttons and assign different views to them, and also how can I trigger it when the href attribute is pressed?
You don't have to use jquery unless you want to.
<img src="~/Content/img/suggest1.png" class="need-buttons pull-right">
function chooser(){
var res = confirm("Do you want to go to url1?");
if(res === true){
alert("option1"); // or document.location = 'url1';
}
else {
alert("option2"); // or document.location = 'url2';
}
}
If you want to make custom buttons you can use jqueryui to do that. Here is a JSFiddle that shows how to do it. Note the external resources loaded in order to make the fiddle work.
Jquery UI's implementation allows you to define your buttons to be anything you want it to be. See this for example
$(document).ready(function () {
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
$("#clicker").on('click', function () {
dialog.dialog("open");
});
});
});
You can also embed a view inside your dialog by simply replacing the content in the modal window. You can achieve this by doing an ajax call to your action method have the action return the partial view you want to show in the dialog and then simply using jquery to append the contents within the proper html tags.
I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:
editOptions: {
url: 'foo/edit.html',
mtype: 'PUT',
//some other options
closeAfterEdit: true,
reloadAfterSubmit: true,
onClose: function() {
alert('Hi ^_^');
}
}
But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.
Thanks.
It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.
It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.
The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.
UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.
The solution: you should include the following line which changes defaults of jqModal.js module:
$.jqm.params.closeoverlay = false;
Description: the lines of jqModal.js module initialize $.jqm as
$.jqm = {
hash: {},
open: function (s,t) { ... },
close: function (s) { ... },
params: {}
};
So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.
I have the following code,
var targetUrl = $(this).attr("href");
$("#leaving-dialog").dialog({
buttons: {
"No, I want to stay here": function () {
$(this).dialog("close");
},
"Yes, that's okay": function () {
window.location.href = targetUrl;
}
}
});
which basically makes one of the buttons send the user somewhere. What I want it to do, is open the link in a new window or tab and then close the modal (as they will still have the original page open).
Any idea how I could resolve this?
Use window.open(targetUrl); instead of window.location.href, and add the line to close the dialog after that.
Here's an example fiddle (using some of the example dialog code from the jQuery UI docs, and I haven't included the CSS files, so it doesn't look like a dialog!)
So I create a simplemodal box with an iframe inside of it. in the iframe I have a text box which calls a function once it is submitted. This function then goes off and executes its own commands. What I want to do is after the person submits their text for the simplemodal box to close. I haven't really seen a attribute that allows me to set an id for the modal so I can refer to it outside the function. Here is my code:
the modal:
$.modal('<iframe src="chrome-extension://kdcfmjjkjcgaklpmpnhcmieepkiddfen/options.min.html" height="120" width="300" style="border:0">', {
close: true,
closeHTML:"",
containerCss:{
backgroundColor:"#000",
borderColor:"#000",
height:100,
padding:0,
width:300,
height:125
},
overlayClose:true,
opacity:50,
overlayCss: {backgroundColor:"#000"}
});
the options.min.html:
the passMessage:
function passMessage() {
var value = document.getElementById('speechInput').value;
var event = "commands"
$.modal.close();
chrome.extension.sendRequest({command:value}, function(response) {});
}
as you can see the modal uses the options.min.html to create a speech input box inside the modal. Once the user stops talking another function is called in which the value is taken from that box. However the $.modal.close(); function does not actually close the modal but instead just hangs my program and it goes nowhere. I need to know how to refer to the modal that is created elsewhere.
thanks for any help
If you want to close the modal from within the iframe, use the following JavaScript:
parent.$.modal.close();
As for ID's, SimpleModal automatically adds them to the dialog elements: simplemodal-overlay, simplemodal-container, and simplemodal-data