The issue is for the fist time only other times it works fine. When i tried to open modal as below.Some times the modal content which tied to templateUrl is not rendered, it only shows backdrop with out modal content.I am using angular-ui-bootstrap version Version: 2.4.0. Kindly help me in finding the issue. The issue is rarely reproduced not all the times.
dialog = $uibModal.open({
animation: true,
scope: scope,
size: "lg",
backdrop: 'static',
keyboard: false,
templateUrl: 'question.html',
windowClass: 'ep-std-dialog-position'
});
Related
This is on Drupal 8.6, PHP 7.2, Theme is based on Bootstrap.
The scenario is, I want to display a dialog box with a subscription form in the home page. The dialog box will be loaded automatically when page load, not by click any link.
I see there are lot of examples there in the net, but all related to by clicking a link, modal will display. But I want to load it without any click.
I partially successful by using BootstrapDialog, but ajax is not working on form submit button. What I did, I attach a js file in the front page, with the code below. It shows the Modal Dialog box, and I tuned a page--newsletter--subscribe.html.twig, its working But submit button not working not ajax is working.
BootstrapDialog.show({
title: 'Subscribe To Newsletter',
message: jQuery('<div></div>').load('/newsletter/subscribe'),
closable: false,
draggable: true,
closeByBackdrop: false,
closeByKeyboard: false,
buttons: [{
label: 'Close',
action: function(dialogRef){
dialogRef.close();
}
}]
});
I saw there is an example in code node.preview.js file like this:
var $previewDialog = $('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');
Drupal.dialog($previewDialog, {
title: Drupal.t('Leave preview?'),
buttons: [{
text: Drupal.t('Cancel'),
click: function click() {
$(this).dialog('close');
}
}, {
text: Drupal.t('Leave preview'),
click: function click() {
window.top.location.href = event.target.href;
}
}]
}).showModal();
But I never able to make it working in my custom module.
If some one can help on this, will be really great!
Update:
I just tried to put a link manually in the template and tried to open the dialog, but it gives me some error:
Show Dialog
The error is as follows:
dialog.js?v=8.6.4:35 Uncaught TypeError: $element.dialog is not a function
at openDialog (dialog.js?v=8.6.4:35)
at Object.dialog.showModal (dialog.js?v=8.6.4:52)
at Drupal.AjaxCommands.openDialog (dialog.ajax.js?v=8.6.4:96)
at Drupal.Ajax.success (ajax.js?pkvhqx:155)
at Object.success (ajax.js?v=8.6.4:234)
at i (jquery.min.js?v=3.2.1:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
at A (jquery.min.js?v=3.2.1:4)
at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)
It seems some of the library is not loaded. Here is my global attachement:
dependencies:
- core/jquery
- core/jquery.ui
- core/drupal.ajax
- core/drupal
- core/drupalSettings
- core/drupal.dialog
- core/drupal.dialog.ajax
- core/jquery.form
- core/jquery.once
- core/modernizr
Any help will be great!
This issue is related to the pro theme I have purchased named "glazed". Its removed the bootstrap modals library. When I disabled the Bootstrap Modal library from theme settings, Modals are working fine. But when I tried to enable the Bootstrap Modal, it gives the following message, which explain everything:
Your theme is trying to load the Bootstrap Modals override library from the bootstrap basetheme. This library is not compatible with Glazed Builder and therefore its assets have been removed from the page. To make this message disappear Please go to your (default) theme settings form, scroll down to Bootstrap settings, and under the Javascript category disable the "Bootstrap Modals" setting.
Having some trouble opening a Dialog after navigating to a page. The intention is to always open the dialog when a user lands on this page.
Simplified, I have a controller that looks like this:
onInit: function() {}
this.myRouter.getRoute("orderscreate").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function() {
this.dialog = sap.ui.xmlfragment("myDialog", this);
this.dialog.open();
},
When I put a debugger in, this works great: I can see the dialog is open.
THEN, the navigation animation kicks in, does the slide animation, and upon completion the dialog is closed again. I'm not sure why it insist on navigating after the view has rendered.
This happens when using navTo as well. Dialog opens, animation starts, dialog is closed again. sap.m.Page does not have another way of executing code after showing, as far as I'm aware.
Any advice?
Unless told otherwise the TargetHandler will close all open dialogs.
TargetHandler, a class used for closing dialogs and showing transitions in NavContainers when targets are displayed.
Try adding the following code after your router has been initialized
this.myRouter.getTargetHandler().setCloseDialogs(false);
I'm working on a signature pad feature to my app using szimek/signature_pad. When a user presses "add signature" button, the overlay container pops up. This container is used to sign and accept/clear the signature.
The problem is that I want to align control buttons in a specific way using sap.m.FlexBox, but when I add my FlexBox object to the content of the overlay object, the FlexBox object is not rendered (but the myhtml part of the oOverlayContainer's content is rendered and works fine).
Here is the code of the relevant function: LINK.
What am I missing here? Thanks!
FlexBox control doesn't have content aggregation, but items:
var oButtonContainer = new sap.m.FlexBox({
justifyContent: sap.m.FlexJustifyContent.SpaceAround,
alignItems: sap.m.FlexAlignItems.Center,
items: [oCloseButton, oSubmitSignatureButton, oClearButton],
fitContainer: true,
});
Here is a working example
I have a modal jQuery dialog with a number of text fields. The text fields are affected by the standard IE 8 autocomplete (which is desired). However, when the host page is scrolled to any position but the top (either before or after the dialog has been opened), the auotocomplete div is offset by the distance of the scroll (e.g. it appears well below the associated textbox). Effectively, the dialog follows the scroll of the host page, but the autocomplete does not follow. This effect is seen even when the host page has been scrolled before opening the dialog.
$("#InterestsDetailModalContainer").dialog({autoOpen: false});
$("#InterestsDetailModalContainer").dialog("option", "title", "Additional Interests Detail");
$("#InterestsDetailModalContainer").dialog("option", "height", 600);
$("#InterestsDetailModalContainer").dialog("option", "width", 1000);
$("#InterestsDetailModalContainer").dialog("option", "modal", true);
I'm having a hard time finding anything out there that isn't talking about the jQuery autocomplete feature, which I am NOT using here.
Thanks!
You can mention the options in a single line of selector like the following:
$("#InterestsDetailModalContainer").dialog({
autoOpen: false,
title: "Additional Interests Detail",
height: 600,
width: 1000,
modal: true,
});
Try this, It's not a solution, but try this and let know weather solved.
I'm using Fancybox afterShow to display image descriptions on the side via overlay like so:
afterShow : function (){
var description = "<div class='hidden_tab'>"+$("#tab").html()+"</div>"
$('#fancybox-overlay').html(description);
}
The problem is that I need modal to be false so users can click out. But the hidden_tab tabs, when clicked, also exit fancybox.
Is there a way to section where modal takes affect? Or a workaround? I have tried setting z-index for the hidden_tab to be high but this did not do the trick.
If you need to set modal : false then try adding closeClick : false (which prevents closing when clicking INSIDE fancybox)
BTW, the default value of modal is false. Don't assume that people will necessarily understand why modal was set to true in your script.