Oracle APEX hide the x on the modal dialog - oracle-apex

I tried to hide the x on the upper right-hand corner of my modal dialog window using both css and JQuery but nothing owrks. I tries using dynamic action on page load:
$("button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close").hide();
and to use css:
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close
{
visibility: hidden !important;
}
for my inline css but neither worked, the x still shows up

The div where this button is showed is rendered in the parent page, so to get it in the modal page, you need to add "parent" in the beginning of your javarscript.
try this:
var button = parent.$('.ui-dialog-titlebar-close'); //get the button
button.hide(); //hide the button

Related

how to scroll modal window in imacros (slack.com)?

I have the task: get all names members of (myworkspace).slack.com/messages/****/details/ in #general channel.
On this page I click "Members" -> "See all members".
Modal window appears, and Imacros has to scroll this modal window while all members not visible.
(js) But this code dont work:
var modal = window.content.document.getElementById("generic_dialog"); // Modal window with all members
iimPlayCode("URL GOTO=javascript:modal.scrollBy(0, 1000)"); // Scrolling
In case somebody prefers using a bookmarklet to scroll that list:
javascript:(function() {
var scrInt = setInterval(() => {try {document.querySelector("#channel_membership_dialog_scroller").scrollTop += 5000} catch(e) {clearInterval(scrInt)}}, 1500);
})();

Ionic2 menuToggle is not working after Modal.present

My side menu or menu toggle code is in the app.compnent.ts. This menu toggle is working perfectly in all the pages before I click Modal. MenuToggle is not working after I click the button for Modal. I'm not sure what is the exact issue. Any suggestions please?
Menu:
<ion-icon name="menu" menuToggle float-left margin-right></ion-icon>
PageA:
pageBModal() {
let modal = this.modalCtrl.create(PageB);
modal.present();
}
PageB:
closeModal() {
this.viewCtrl.dismiss();
this.navCtrl.setRoot(DashBoardPage);
}
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
Even I have faced the same issue.
I have fixed this by using Events.
If you try to navigate page from modal, You will face with above issue.(Side menu will not work). Instead of navigating from modal ts, Try to navigate from parent ts by using Events.
Eg :
Parent ts :
events.subscribe('modal:finished', (page) => {
if(page == 'yourpage') {
this.navCtrl.push(YourPage);
}
});
Modal ts :
this.events.publish('modal:finished', 'yourpage');
You can send from modal where you need to redirect after modal dismiss. Based on this condition you can redirect wherever you want.
Hope it will help someone.

Return values from ionic2 modal to parent page

I am opening a Modal in ionic2, to search the values from a list. After search, I want to get the selected values back in my parent screen.
searchRooms(){
let modal = this.modalCtrl.create(RoomSearch);
modal.present();
}
This opens my search Modal and there I have list of available rooms. If user click on any room then I want to return back the value to parent page. I am not sure how to do this.
From documentation I feel NavConroller.pop can be used to pass back the values but I don't know how to use that.
Thanks in advance.
You can use onDidDismiss method explained in the Modal Controller.
In the page that opens your modal you can do :
let modal = this.modalCtrl.create(RoomSearch);
modal.onDidDismiss(data => {
// Do things with data coming from modal, for instance :
console.log(data);
});
modal.present();
And this in your modal controller, to close the modal :
this.viewCtrl.dismiss({"foo" : "bar"});

Bootstrap 2: tabs in modal

I have bootstrap tabs in bootstrap modal. When I open modal - it looks like tabs are working, because just the first div tab-content is shown and others are hidden.
But then I have a problem - when I click on tabs it fires shown event at my modal and in this event I'm loading contents of this modal. Because of this tabs are loading again and again and first tab stays always selected.
Modal documentation here: http://getbootstrap.com/2.3.2/javascript.html#modals
Tabs documentation here: http://getbootstrap.com/2.3.2/javascript.html#tabs
I initialize tabs like this:
<script type="text/javascript">
$("#modeTabs a").click(function (e) {
e.preventDefault();
$(this).tab("show");
});
</script>

How to get the content of joomla editor in joomla2.5 iframe Madal box

I have a form where I have joomla2.5 Editor. I want to show the content of that joomla2.5 Editor in Iframe Joomla2.5 Modal Box.
I use joomla editor
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
This page is in view folder.
I use the code in js file like window.parent.document.getElementById('body').value or window.parent.jInsertEditorText(tag, this.body);And it is included in js file. when I try to alert, alert shows null.
How to fix this in js file. If any body knows about it, please, reply it.
I need your hand.
Thank you
I write the answer here, because the comments are not good to display
code
Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:
1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:
<script type="text/javascript">
$(document).ready(function(){
// Main parameters:
// Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#'
var HTMLContent = $("#texteditor-id").html();
var width = 600;
var height = 250;
$('#button').click(function(){
// transparent background
// we create a new div, with two attributes
var bgdiv = $('<div>').attr({
className: 'bgtransparent',
id: 'bgtransparent'
});
// add the new div to the page
$('body').append(bgdiv);
// get the widht and height of the main window
var wscr = $(window).width();
var hscr = $(window).height();
// set the background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// modal window
// create other div for the modal window and two attributes
var moddiv = $('<div>').attr({
className: 'bgmodal',
id: 'bgmodal'
});
// add div to the page
$('body').append(moddiv);
// add HTML content to the modal window
$('#bgmodal').append(HTMLContent);
// resize for center adjustment
$(window).resize();
});
$(window).resize(function(){
// explorer window dimensions
var wscr = $(window).width();
var hscr = $(window).height();
// setting background dimensions
$('#bgtransparent').css("width", wscr);
$('#bgtransparent').css("height", hscr);
// setting modal window size
$('#bgmodal').css("width", ancho+'px');
$('#bgmodal').css("height", alto+'px');
// getting modal window size
var wcnt = $('#bgmodal').width();
var hcnt = $('#bgmodal').height();
// get central position
var mleft = ( wscr - wcnt ) / 2;
var mtop = ( hscr - hcnt ) / 2;
// setting modal window centered
$('#bgmodal').css("left", mleft+'px');
$('#bgmodal').css("top", mtop+'px');
});
});
function closeModal(){
// remove created divs
$('#bgmodal').remove();
$('#bgtransparent').remove();
}
</script>
2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:
<input type="button" id="button" value="Preview" />
3- Add the following code to your css
.bgtransparent{
position:fixed;
left:0;
top:0;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
.bgmodal{
position:fixed;
font-family:arial;
font-size:1em;
border:0.05em solid black;
overflow:auto;
background-color:#fff;
}
And that is basically what you need to do. Hope that helps!
Joomla has an inbuilt way to show modal boxes:
First you need to do is ask Joomla to load the modal library:
<?php JHTML::_('behavior.modal'); ?>
And this is the code that opens the modal window:
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="url_to_modal_editor" target="_blank"> Open Modal Editor</a>
This will go in the linked href page (the page of the modal editor), lets say editor.p:
<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'body', '', '400', '150', '20', '20', false, $params );
?>
Please include class="modal" in anchor tag.