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
Related
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);
}
}
});
I'm working in a project using bootstrap framework and I read there are different ways to open a modal window, in my case I open it with javascript with this code:
$('#formVenta').modal({backdrop: 'static', keyboard: false});
I did this because the client asked me to avoid close the modal when click outside but now he wants to press click outside and close the modal again but when there is no content inside a specific div inside my window
<div id="content_goes_here"></div>
I think to solve this in this way
$(document).click(function(e) {
//check if modal is open
if ($('#formVenta').is(':visible')) {
//check if div has content
if ($('#content_goes_here').html().length > 0) {
//do something
}
}
});
The problem I see is that there are text input outside that div and If I want to search something it will close when I make click in the input because there will be not content yet inside the div and I want to avoid this issue.
Is there a way where only when I make click outside the modal window check if the div is empty and make the opposite of the way I opened the window in this case the opposite of this?
$('#formVenta').modal({backdrop: 'static', keyboard: false});
for example change the value of the property backgrop.
I hope you can help me, thanks.
sorry it took a while to find the right properties but here is the best example
$('#formVenta').data('bs.modal').options.backdrop = false; or
$('#formVenta').data('bs.modal').options.backdrop = static;
you can take a look at the current properties you have set by doing
alert(JSON.stringify($('#myModal3').data('bs.modal').options)); or change the alert to console.log()
so you can put an event on the div for when it changes to run the validation function and inside of the validation function you can change the options of the modal with the above code
I have this problem with my JQuery UI Modal window. Its used when i click a button, then it opens up and append contents to it trough an Ajax call to a php file. Works perfectly the first time i open it, but then when i click another button that should show different content, it still shows the old content in it, and i have to refresh the page for it to work.
This is my Dialog open event which is triggered by a switch, and the last part which appends data to my select box on creation.
$( "#attack" ).dialog({
resizable: false,
width:"400px",
buttons: {
Attack: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#users").selectmenu({
create: function( event, ui ) {
$.ajax({
type: "POST",
url: "mapfunctions/FetchUsers.php",
data: {RegionID: RegionID},
success: function(data) {
$("#users").append(data);
}
});
}
});
The dialog looks like this: http://i.imgur.com/02a2GYB.png
The HTML for it is a bit long, so i hope you dont need that dialog code, if so, let me know and i will add.
Its the Select menu which keeps the old data from the first ajax call.
I tried using Destroy and such on close, but then the dialog would simply never open again heh.
Thanks a lot people, hope this is enough for a clear understanding
This is very common problem with ajax and modal windows.. on clicking next button you have to reset the form and load it new.
for eg:
If you are using form with id "myForm" then on clicking another button reset the form like $("#myForm").trigger('reset'); in jQuery. or any other way
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.
Suppose a parent window opens a popup window, and from there I do some character count validation. The character count function should be triggered only when I close the window.
If the character count is below the limit, it should close normally otherwise it should display the editor with the content so that the user can work on reducing the character count and then submit back to parent window.
FYI I'm using Kevin Roth's Cross-browser editor
Thanks in Advance
You can write a function to do some character count validation. If pass, invoke method to close popup window in this function. Then, set this function as the handler to listen click event of close button .
For example, I use jQuery UI dialog as popup window.
<div id="popup">
<!--popup window content-->
<button id="save">Save</button
</div>
<script>
$("#popup").dialog({
...
});
var save = function() {
var isValidated = false; // true means passed.
//...validation here
if (validated) {
$("#popup").dialog("close");
} else {
// show some message and focus on the editor
}
};
</script>