We help IT Professionals succeed at work.

Bootstrap Modal dialog shadowed backdrop does not allow editing of modal box.

High Priority
120 Views
Last Modified: 2019-08-19
backdrop
I am unable to edit the entries in the bootstrap modal box due to the shadowed backdrop. The cursor is disabled at this point and the screen freezes when the modal box is opened. This only occurs on the first page or a unknown page height of the html page. I would like to enable the ability to edit the values or remove the backdrop altogether if it will solve the problem.

Please see the code below:

<h3>Inserting Data into the database</h3>
    <h3>Data List</h3>
    <div id="storesF">
    <div id="modalStationForm">
        
      <!--<form action="/upload" method="post" id="stationForm" enctype="multipart/form-data">-->
      <form id="stationForm" method="POST" action="/station" enctype="multipart/form-data" >
        <label>Store Name:</label>
        <!--When submitting a form, the name value is important and is used in php file, while the id is used for css and javascript(below)-->
        <input type="text" name="station" id="store" size="40" placeholder="Enter Store Name">
        <br><br>
        <!--
        <label for="file">Profile Photo:</label>
        <input type="file" name="image" id="image" onChange={this.uploadFile}>
        <br><br> -->

        <label>Address:</label>
        <input type="text" name="address" id="location" size="40" placeholder="Enter the store's address">
        <br><br>

        <label>Store Sales:</label>
        <input type="number" name="monthlycstoresales" id="sales" size="20">
        <br><br>

        <label>Operator:</label>
        <input type="text" name="operator" id="dealer" size="40" placeholder="Enter the operator's name">
        <br><br>

        <label>Top SKU item:</label>
        <input type="text" name="topsku" id="topitem" size="40" placeholder="Enter the store's top sku item">
        <input type="hidden" id="id" name="record_id">
        <br><br>

        <input id="insertD" type="submit" value="Insert">
        <input id="insertE" type="submit" value="Edit">
        <div id="statusF"></div>
        </form>
     
        <!--
        </div>   !--id=storesF--
        
        </div>  !--id=modalStationForm-->
        
        <!--
        </div>  !--//id=container--
        </div>  !--//id=background--
                                   -->

Open in new window



 <script>$("#modalStationForm").dialog({ autoOpen: false, modal: true, minWidth: 500 });

Open in new window


//(7) Editing information into the database
  $(document).ready(() => {
    $(document).on('click', '.edit', function (e) {
      e.preventDefault();
      $("#insertD").hide();
      $("#insertE").show();
      $("#stationForm")[0].reset();
      $("#stationForm").attr({
        action: $(e.target).attr("href"),
        //action: "/station", // PATH TO POST NEW STATION DATA ?
        method: "PUT"
      });
      var value = $(e.target).closest("div").find("input:hidden").val();
      value = JSON.parse(value);

      $("#store", "#modalStationForm").val(value.Station);
      //$("#image", "#modalStationForm").val(value.Image);
      $("#location", "#modalStationForm").val(value.Address);
      $("#sales", "#modalStationForm").val(value['Monthly C-Store Sales']);
      $("#dealer", "#modalStationForm").val(value.Operator);
      $("#topitem", "#modalStationForm").val(value['Top SKU']);
      $("#id", "#modalStationForm").val(value.ID);
      $("#storesF")
      $("#modalStationForm")
        .dialog("option", "title", "Editing Station")
        .dialog("open");
    });
    
    $('#insertE').click((event) => {
    //$("#stationForm", "#modalStationForm").on("submit", function (event)  
      //$("#stationForm").on("submit", function (event) {
      event.preventDefault();
      //var methodToUse = $(this).attr("method"); // PUT
      //var url = $(this).data("url");
     
      /*
      var data = {
        station: $("#store", "#modalStationForm").val(),
        address: $('#location', "#modalStationForm").val(),
        monthlycstoresales: $('#sales', "#modalStationForm").val(),
        operator: $('#dealer', "#modalStationForm").val(),
        topsku: $('#topitem', "#modalStationForm").val(),
        id: $('#id', "#modalStationForm").val()
      };
      */
    
         var data = JSON.stringify({
     
        station: $("#store", "#modalStationForm").val(),
        //image: $("#image", "#modalStationForm").val(),
        address: $("#location", "#modalStationForm").val(),
        monthlycstoresales: $("#sales", "#modalStationForm").val(),
        operator: $("#dealer", "#modalStationForm").val(),
        topsku: $("#topitem", "#modalStationForm").val(),
        id: $("#id", "#modalStationForm").val()
       
      });

      //var you = $(location).attr('href');
      //var me = window.location.href;
      //console.log(you);
      
      $.ajax({
        
        url:'/api/editstation/' + $('#id', "#modalStationForm").val(),
        //url:'/edit/' + $('#id', "#modalStationForm").val(),
        
        //url: $(this).attr("action"),
        //url:'http://localhost:5000/edit/3',
        //url:'http://localhost:5000/station', wrong url 404 message
        data: data,
        dataType : "JSON",
        contentType: "application/json",
        method: "PUT",
        success: (data) => {
          alert('Record successfully edited')
         // console.log(data);
         // console.log('you and me');
         // console.log(me);
          //console.log(url);
          //alert(url);
          $("#modalStationForm").dialog("close");
        }
      });
    });
  });

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Unfortunately what you have posted does not help us understand the problem. The code is not enough to build a working demo of the code to replicate the problem.

You say you are using a Bootstrap Modal - but you are using
$("#modalStationForm").dialog({ autoOpen: false, modal: true, minWidth: 500 });

Open in new window

To open the dialog - which is not Bootstrap - looks like JqueryUI or similar.

Please provide code that demonstrates what the problem is - or even better a link to a page the shows the problem.
CERTIFIED EXPERT

Commented:
Hi,

you can simply add z-index value to the css of your modal so it will appear over the gray not under

You may need to change the value and make test
 z-index: 25;

Open in new window


https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index


If you want to edit or delete the backdrop you will need to check your code this can be inline css or inside CSS sheet and sometimes hardcoded in Javascript
Omar MartinBridgemaker

Author

Commented:
Yes, correction....it is Jquery and not Bootstrap.

Lenamtl: Which element should I put the z-index?

1)
  id="storesF"

or

2)
  id="modalStationForm"

or the form id itself?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Lenamtl: Which element should I put the z-index?
That's why we need to see your code. With jQueryUI - you shouldn't have to add anything to bring the modal above the overlay which means something in your implementation is not right.

That is why I asked to see a link - to see how you have implemented it - from there we can give you much better advice.

Simply throwing CSS at the problem to make it go away is not the best solution. Rather understand what is causing it and fix it properly.

If you can either post a link to your page
Or
To a demo page that replicates the problem.
Or
Post the html for the page
We will then be in a better position to assist you.
Omar MartinBridgemaker

Author

Commented:
I posted all the code associated with the problem at the beginning with an file image of the problem.....did you see them? The code includes the form setup html with the id of modalStationForm being tied to the modal dialog as seen here :" <script>$("#modalStationForm").dialog({ autoOpen: false, modal: true, minWidth: 500 });

Then I also provided the edit button code which is used to edit the record with the modal.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I saw that but to diagnose from partial code and an image for this sort of problem is not practical.
If I paste your code into a template I get this (http://www.marcorpsa.com/ee/t3745.html) which, even after cleaning up the errors and missing scripts still does not replicate your problem.

Without being able to replicate it - very difficult to solve.
Omar MartinBridgemaker

Author

Commented:
There is so much going on in this html......it's probably the cause of the problem. Do you want all the contents?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
It would be best if you could create a minimal sample that replicates the issue.

Usually when creating such a sample you discover the problem - so it is a good exercise to do.

I would create a simple page with a simple dialog - minimal content.

Check if that has the problem.

Then add content from the problem page until the new page breaks.

That should point to the problem - if it doesn't post the test page here (or preferably a link)
CERTIFIED EXPERT

Commented:
Hi,

You can add the z-index to the entire form or section or
add z-index with a minus value for the backdrop CSS

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

You will need to make some test to found the good value as you may have other z-index set on the page.

You can test it, using Chrome right click / inspect then select an element from element tab and edit the css from Style (located at the right)
This allow to change the value and see the result on the spot then when you find the correct value note the css class name, file name  and line to edit then you can edit your file and test it .
Bridgemaker
Commented:
I stumbled across the solution, aparently, it didn't like the jquery ui I was using:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css">

I added the following ui and it seems to fix the issue for  now:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
https://www.experts-exchange.com/questions/29154934/Bootstrap-Modal-dialog-shadowed-backdrop-does-not-allow-editing-of-modal-box.html#a42922752
That's why we need to see your code. With jQueryUI - you shouldn't have to add anything to bring the modal above the overlay which means something in your implementation is not right.

Glad you managed to get it working - remember, if possible give us something that can replicate the problem - it will help get to an answer much quicker.
Omar MartinBridgemaker

Author

Commented:
Thank you. Your advice is going a very long way.