Is it possible to make an extra button on the jquery magnific-popup component, with the functionality to close the dialog?
I'm using the component to add a description to a photo, therefor I'll need a submit button that will add the description via ajax to the photo (this happens already) but the dialog isn't closing...
After reading the doc closely you can do it like:
$.magnificPopup.close(); // Close popup that is currently opened (shorthand)
$('.element-with-popup').magnificPopup('close'); // Will closethe popup
Related
The reason for this to cover any user that MAY have javascript turned off. It's a company standard that we develop our web pages for this, since our demographic still have their VCR's blinking 12:00.
I have a text link that is being populated by a database call:
Click for Article
The common user experience is that the user will click the link, and it will toggle a modal displaying the article. BUT we want to incorporate a fallback in case the user has javascript turned off, so when the link is clicked, it will simply take the user to the article page and display the dynamic content loaded by padding the Article ID of 123.
Currently with Bootstrap properly loaded on the page, when the user clickson the link, it just goes to the article page and does NOT toggle the modal.
What method do I need to add to a onClick event to prevent this click through from occuring, but still toggling the modal to display?
$('[data-toggle="modal"]').on('click', function(e){
e.stopPropagation();
});
or
$('[data-toggle="modal"]').on('click', function(e){
e.preventDefault();
});
The correct answer is e.preventDefault()
I am using on click method onclick example am using
I am using two step Onclick method when I click 2nd Onclick a HTML form should open in same page how do I do that
since I am using many sub categories Like ,mobile, computer, etc,...
so I have many sub form
when user click sub form the linked form should open in same page here is the working example Onclick method
what I need is how to open html form file below
You could do something like this: http://jsfiddle.net/8ugjj2yo/2/
In short: bind click events on each 1:st menu item, and then on 2:nd menu item.
Each click handler should close "all other" of the same kind when you click it, then open whatever you clicked (if you want more forms to be displayed at the same time, remove all rows that call
.hide();
The css supplied in the fiddle is just temporary, change it to whatever, the only thing you can't change is the
display:none;
thats there already. (You could also hide them on page load with jquery ofc..)
I got a question. I'm using the jQuery modal dialog plugin to let user input some data that will be saved in a database. My dialog can actually have two states which users can choose from by selecting a radio button inside the dialog box. The problem I'm having is that I lose some of the styles on my dialog box when the user selects a radio button. Also, how do I make it so that when the user saves the input data on the dialog box, after the dialog has closed, I want to load the new data live on the current page (with without the user having to refresh the page to see the changes).
Any idea?
As suggested by the other guys, you should give us some code for your first question.
For your second question, The jQuery Modal Dialog plugin picks up a div from the DOM and converts it to the modal dialog. So all the controls which are available inside the modal dialog can be access with normal jQuery.
Also, you can assign a function to be executed when the OK or Cancel buttons are clicked inside the modal dialog. Have a look here:http://jqueryui.com/demos/dialog/#option-buttons
So what you can do is, when the "OK" button is clicked, your function will pickup all the values which are inside the controls on the modal dialog and assign them to the controls on the current page.
Hope this helps.
I have some ajax calls in one of my pages. On complete I want do display a simple message letting the user know that the operation has been completed. maybe with an ok button that they can click to close the window. Alert("message") would work if I could remove the title and that scary "!" icon.
Any jquery/javascript sugestions? -Thanks
Check out the jquery ui Dialog plugin:
http://jqueryui.com/demos/dialog/
You can customize it to suit your needs, and add what ever kind of buttons you want. It's just HTML inside the dialog.
Could use a modal dialog. Check out the modal dialog in jQuery UI http://jqueryui.com/demos/dialog/
Basically when the AJAX request is completed and successful you can open your dialog with an ok button and display whatever title you would like.
I like simplemodal. It also has a confirm style dialog - this looks similar to the default alert/confirm dialogs. You can see a demo here.
I am trying to make a Login popup window. For example, if someone clicked the login button a popup window will show and it will change the opacity of the main page and give focus to the popup window.
Here is an example of a web site that utilizes what I want to implement.
You can use the jquery dialog referenced in your post for this.
Here is an example of how to create form elements on it.
you could use jqueryUI dialog
you could also use the jQuery BlockUI plugin:
http://plugins.jquery.com/project/blockUI
I've used the Boxy plugin before, it's very lightweight (lighter than JQueryUI, although not as much functionality).
It's very easy to use, it was the first plugin I used when learning jQuery.
http://jqueryui.com/dialog/#modal-form
use this site link
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.