Posted by lasac on October 19, 2010 at 2:39pm
7 followers
Jump to:
| Project: | Modal Frame API |
| Version: | 6.x-1.x-dev |
| Component: | Javascript |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
If a modal is open, and that modal child page contains a link. How can i get it to open in that modal. Now every link opend in a modal gets target="_new". Offcourse i can remove that with some custom jquery but i hope/guess there is allready some sort of option build in modalframe for this.
Comments
#1
And while we're at it, 2) can we open a link in the parent page and close the modal? So we don't get a new tab?
#2
You can add the CSS class "modalframe-exclude" to the links that you wish to open inside the Modal Frame. See Drupal.modalFrameChild.behaviors.parseLinks() in modalframe/js/child.js
#3
Re: "And while we're at it, 2) can we open a link in the parent page and close the modal? So we don't get a new tab?"
This is a bit more tricky. From the child window you can trigger a close, and that may provide arguments to the onSubmit method of the parent window. That's the one that can reload the page to any URL that you may need.
I think you'll find ideas to do this in the Modal Frame Contrib Package.
#4
@#2: I tried that and still am trying but it doesnt work in the modal... When im viewing the child in a own tab, the links with the above class don't have the target set. But when i view it in the modal on a parent page the child page links do have the target set. I cleared cache but doesnt seem to do the trick.
//edit: viewing in a own tab always seems to remove the target.
//edit: my custom .js file in which i add the class to the links, is called before the child.js. So it's not that.
#5
child.js @103
if ($(this).hasClass('modalframe-exclude'))just wont validate... I don't get an error nothing.#6
Ok so when the class is added directly in the html element everything works.
//problem seems to be that the link is processed before i can add modalframe-excluse trough my own .js, any Markus ideas?
#7
Could this have to do with:
/*** Attach our own behavior on top of the list of existing behaviors.
*
* We need to execute before everything else because the child frame is not
* visible until we bind the child window to the parent, and this may cause
* problems with other behaviors that need the document visible in order to
* do its own job.
*/
Drupal.behaviors = $.extend({modalFrameChild: Drupal.modalFrameChild.attach}, Drupal.behaviors);
//edit: Ok this has to do with
Drupal.behaviors = $.extend({modalFrameChild: Drupal.modalFrameChild.attach}, Drupal.behaviors);. Guess it places the modalFrameChild above my behavior and there for the processes the link before i can.#8
hereby my JS file
(function ($) {
Drupal.modals = function(context) {
$('.facebook_status_edit_delete a', context).not('.modalframe-processed').addClass('modalframe-exclude');
$('#messaging', context).addClass('modalframe-message-processed').each(function() {
$(this).parent().prepend('<div class="modalframe-modals-messages" style="display:none;"></div>');
});
// Create an element to dynamically render status messages.
var modalsConfigurationClick = function(action, url, refreshAfterSubmit) {
// Hide status messages before opening the modal frame.
$('.modalframe-modals-messages').hide();
if (refreshAfterSubmit) {
url += (url.indexOf('?') == -1 ? '?' : '&') +'refresh=1';
}
var onSubmitCallback = function(args, statusMessages) {
if (args && args.submitted) {
// Render new status messages, if any.
if (statusMessages && statusMessages.length) {
$('.modalframe-modals-messages').html(statusMessages).show('fast');
window.scrollTo(0, 0);
}
if (refreshAfterSubmit) {
window.scrollTo(0, 0);
setTimeout(function() { window.location.reload(); }, 1500);
}
}
};
var modalFrameOptions = {
url: url,
width: 800,
height: 200,
draggable: false,
//customDialogOptions: (modalFrameOptions.height = 100),
onSubmit: onSubmitCallback
};
Drupal.modalFrame.open(modalFrameOptions);
return false;
};
//modalize user login
$('a[href$=user/login]', context).not('.modalframe-processed').attr('href', function() {
return this.href + '?modal=1'
}).addClass('use-modal').click(function(){
var $link = $(this), url = $link.attr('href');
return modalsConfigurationClick('', url, true);
});
//modalize user register
$('a[href$=user/register]', context).not('.modalframe-processed').attr('href', function() {
return this.href + '?modal=1'
}).addClass('use-modal').click(function(){
var $link = $(this), url = $link.attr('href');
return modalsConfigurationClick('', url, false);
});
//modalize send new message
$('a[href*=messages/new]', context).not('.modalframe-processed').attr('href', function() {
return this.href + '?modal=1'
}).addClass('use-modal').click(function(){
var $link = $(this), url = $link.attr('href');
return modalsConfigurationClick('', url, false);
});
//modalize relationship request
$('a.user_relationships_popup_link', context).not('.modalframe-processed').attr('href', function() {
return this.href + '&modal=1'
}).addClass('use-modal').click(function(){
var $link = $(this), url = $link.attr('href');
return modalsConfigurationClick('', url, true);
});
//modalize flag abuse
$('a.flag', context).not('.modalframe-processed').attr('href', function() {
return this.href + '&modal=1'
}).addClass('use-modal').click(function(){
var $link = $(this), url = $link.attr('href');
return modalsConfigurationClick('', url, true);
});
//modalize facebook status react
$('.babbel_react a', context).not('.modalframe-processed').attr('href', function() {
return this.href + '&modal=1'
}).addClass('use-modal').click(function(){
var $link = $(this), url = $link.attr('href');
return modalsConfigurationClick('', url, true);
});
};
})(jQuery)
I can't figure it out, maybe you can help markus.
#9
Great, got it working by using
Drupal.modalFrameChild = Drupal.modalFrameChild || {};Drupal.modalFrameChild.behaviors = Drupal.modalFrameChild.behaviors || {};
Drupal.modalFrameChild.behaviors.modals = function(context) {
Got that from the subnodes_by_taxonomy module.
//edit lol, it does work but i had my child an parent settings in one js file and now the parent settings dont work...
//edit got the parent and child settings working now.
#10
subscribing
#11
@lasac I can't make it work. Can you explain in details how you did?
Thx
#12
Ok got it working by using the 'modalframe-exclude' class.
#13
Oh boy. Your example is appreciated but it's got a lot going on. I'm interested in just closing the modal and getting back to the parent window when a link is clicked. (not a new tab) Any possibility of a simple example doing that? It almost seems easier to patch modalframe to do what I need if a certain class is attached to the link. :( I don't really want to do that.
#14
That I may smite asunder the blemish wrought upon the internet by this automatic target="_new" madness...
$(document).ready(function() {$("a.modalframe-processed").each(function() {
$(this).attr('target', '_self');
});
});
#15
hermes_costell i love the simplicity, great find.
#16
hi,
i have a modal with links inside and i'd like to open these link inside the modal but without sidebars etc.
Solution #14 just replace the target, all complete page is loaded, not only the main content (without sidebars).
I couldn't get it working with solution #8.
//edit:
I was able to open another modal from a modal using the code from modalframe_more_help at Modal Frame Contrib Package
thanks
Carlos