Region Auto Refresh, Using JavaScript And Functions In Apex

How to Close Modal Page When Clicking Outside in Oracle Apex

 

In today's post, I will try to figure out how to close the modal page when I click outside of Oracle Apex

Some Discussion About Modal Close When Clicking Outside.

We Use Modal Pages In Oracle Apex Applications At Different Times And Open Modal Pages By Calling From Different Locations As Needed. When The Modal Page Is Open, You Have To Close The Modal Page By Clicking On The Cross Icon. If you would like to learn how to close a modal window in Oracle Apex, then you will find a practical guide in this blog. The blog will provide clear steps on how to close a modal window. For example, you will be able to find out how to close a modal window that was opened by clicking outside the modal window. In other words, if you would like to learn how to close a modal window with no title, then you will find the blog very helpful. In Today's Post I Will Discuss In Detail How To Close The Modal Page If You Click Anywhere In The Application And Try To Show The Practical. With This Post And Video Tutorial You Can Easily Use It In Your Own Application. Most of the time we use the modal page for Create New Account on the Oracle Apex application login page.

Steps How To Close The Modal Page When Clicking Outside.

I will try to show you step by step how to close the modal page when you click outside in Oracle Apex application.

1. First We Will Create A Modal Page.
       Name- Close Modal Page When Clicking Outside

open: function( event, ui ) {closeDialogClickOutside(this); }

3. Create a Dynamic Action ->
       Name- Clicking Outside
      Event- Click
      Selection Type- jQuery Selector
      jQuery Selector- .test_invalid_selector
      Action- Close Dialog

4. Now We Will Go Directly To The Page From Which We Will Open The Modal Page.
      Create A Button To Open The Modal Page
      Name- OPEN_MODAL
      Behavior -> Action- Redirect to Page in this Application
      Target- Select your modal page.

5. Goto Page Properties ->
       Function and Global Variable Declaration -> Paste the following code-

function closeDialogClickOutside(elem){
    $('.ui-widget-overlay').click(function(){
        $(elem).dialog('close');
        });
    }

6. Create a Dynamic Action ->
       Name- Modal Close
      Action >> Execute JavaScript Code >> Paste the following code-

console.log('dialog closed'`);

All Our Work Is Done, Now We Will Try To See If The Work Is Completed Successfully.

If There Is Any Problem With The Sql Code Provided By Me Then You Can Definitely Let Me Know By Mail Or Mobile Number And Comment. I Must Give You Any Sql Code.

Introduction to Oracle Apex Modal Page

Modal pages are used in Oracle Apex applications in unique ways depending on the wishes of the utility. We use modal pages to carry out not unusual tasks along with opening, editing, and saving data. however whilst we create a modal web page, we ought to be near the modal page whilst we are finished with our work. this is done by way of clicking at the passing icon inside the pinnacle-right nook. In modern-day publish, I will discuss in detail how to near the modal web page if you are performed along with your paintings. Modal Pages are part of Oracle Apex Programming. Modal Pages are the pages that might be proven on the front stop of the utility. when customers click on a button or a link, a Modal page is opened and the consumer has to close the Modal page by way of clicking at the cross icon. In the contemporary post, I'm able to talk about the introduction to Oracle Apex Modal page. whilst you open a modal web page in Oracle Apex, you can close the modal web page by clicking on the cross icon. but, you can also near the modal page when you click outdoor the modal web page. this selection is beneficial in case you want to shut the modal page without having to click on the cross icon.

 

🔗 Demo Application-
            URL- Demo Application
            Username - demo, Pass- demo
 

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.

Then Enjoy.........................