1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Bootstrap Modal structures - cannot "close" the dialog

Discussion in 'Website Customization' started by Richard Stephen on Sep 2, 2021.

  1. Richard Stephen

    By:Richard StephenSep 2, 2021
    Community Member

    Joined:
    Feb 25, 2019
    Messages:
    16
    Likes Received:
    6
    Gender:
    Male
    Location:
    Telecom. Engineering
    I've been playing with bootstrap Modal
    I can build them ok and trigger them - but I cannot get them to close.
    The X in the Header row and the Close button do not work.
    Additionally, when the popup appears and the background goes dark - it darken's the whole page, not just an area, so there is nowhere to click outside the modal popup to dismiss it.

    What am I doing wrong - or is it a bug connected with the underlying clubrunner code base ?

    I'm using a millenium theme with a custom page, content template=Full Width

    The page I have built is here: https://rotaryoceania.zone/page/z-test

    and the full html code I used to build the page is in the attached .txt file

    and one of the references I have used is
    https://getbootstrap.com/docs/4.0/components/modal/
     

    Attached Files:

  2. Zach

    By:ZachSep 3, 2021
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    664
    Likes Received:
    96
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hi Richard,

    I spent some time looking into this issue with our team, to try and understand if it was a problem on our end, or with the specific custom code.

    It does appear to be an issue with our customizations to bootstrap, in addition to how the page is built. The bootstrap modal will attach itself to the content it comes from. Due to platform customizations, and the way your custom code is loaded, the popup is behind the Bootstrap UI blocking code.

    We are investigating the issue internally to see if we can better support this use case, by updating or removing the changes that are causing the issue at hand.

    I have two workarounds for this issue as of today:

    Method one: Custom CSS

    Disable the background modal with custom CSS as part of your widget. You can add the following code to your current widget to accomplish this.
    Code:
    <style> .modal-backdrop.in {display: none;}</style>
    Please note that this should not be a part of the global CSS, only used when you’re using this js popup.

    Method two: Use jQuery popup, instead of bootstrap popup.

    Instead of using the bootstrap function, we can instead use a jQuery popup function instead. The jQuery popup attaches itself to the bottom of the page. This causes the popup to be ontop of the modal code instead of behind it, allowing for it to be interactable. The following is a working example code that you should be able to get working inside of a widget.

    Code:
     <script>
      $( function() {
        $( "#opener" ).on( "click", function() {
          $( "#dialog" ).dialog({
            modal: true,
          });
        });
      } );
    </script>
    
    <div id="dialog" title="Basic dialog">
    
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    
    </div>
    <div><button id="opener">Open Dialog</button></div>
     
  3. Richard Stephen

    By:Richard StephenOct 27, 2021
    Community Member

    Joined:
    Feb 25, 2019
    Messages:
    16
    Likes Received:
    6
    Gender:
    Male
    Location:
    Telecom. Engineering
    Zach - thanks for this, that is really helpful. I like the simplicity of the css :)

    Apologies for the very slow reply.
     
    Zach likes this.
Top