Faced the problem of modal windows, namely, when when you click in one modal window, I should “fall out” the second. The first modal window works as it should, but when calling the second window, the following happens:

1. The first modal window closes, but everything else remains inactive
2. The second modal window is shown under the first.
   What I expect: that I will click on the first modal window and the second will be displayed on top of it, when closing the second one, the first window will turn out again active

Div unit where modal windows will be loaded, the index.cshtml page:

& lt; div id = "moddialog" class = "modal fade" & gt;
  & lt; div id = "dialogcontent" class = "modal-dialog" & gt; & lt; / div & gt;
& lt; / div & gt;
& lt; div id = "moddialog2" modal = "Modal Fade" & gt;
  & lt; div id = "dialogcontent2" class = "modal-dialog" & gt; & lt; / div & gt;
& lt; / div & gt;

Call the first modal window:

& lt; div class = "panel-line-nom" data-plain-mnemo = "@ model.mnemo_name"
              Data-Plain-stack = "@ Item_KARMAN.Stack_Name"
              Data-Plain-Pocket = "@ item_karman.pocket_num" & gt;
@ HTML.ActionLink (@ item_noms.diameter, "Getkarmandetails", New
{
  _StackName = item_karman.stack_name,
  _pocketnum = item_karman.pocket_num,
  _Mnemoname = Model.mnemo_name.
},
NEW.
{
  @Class = "karmanitem"
})
& lt; / div & gt;

Pressing this event:

$ ("body"). ON ('Click', '.karmanitem', Function (E) {
E.PreventDefault ();
var href = $ (this) .attr ('href');
Ajaxglobals ({
  URL: href,
  Data: {
    _Mnemoname: $ (this) .data ('Plainmnemo'),
    _StackName: $ (this) .data ('PlainStack'),
    _PocketNum: $ (this) .data ('Plainpocket')
  },
  SUCCESS: FUNCTION (DATA) {
    $ ('# DialogContent'). HTML (Data.ResultHTML);
    $ ('. Table-Custom'). TableHover ();
    $ ('# moddialog'). Modal ('Show');
  }
});

});

Next, in the first modal window (partial view), call the second modal window on the link as follows:

& lt; div data-plain-mnemo = "@ model.mnemo_name"
 Data-Plain-stack = "@ Element.Stack_Name"
 Data-Plain-Pocket = "@ element.pocket_num"
 Data-Plain-diam = "@ element.diameter"
 Data-Plain-Thick = "@ element.thickness"
 Data-Plain-Stal = "@ element.stal"
 Data-Plain-Gost = "@ element.gost" & gt; @ html.actionlink ("pipe numbers", "getpipenumbers", new
  {
    _StackName = @ element.stack_name,
    _pocketnum = @ element.pocket_num,
    _Mnemoname = @ element.mnemo_name,
    _Diameter = @ element.diameter,
    _thickness = @ element.thickness,
    _stal = @ element.stal,
    _gost = @ element.gost
  }, new
    {
      @Class = "SortItem"
    })

and processed this event like this:

$ ("body"). ON ('Click', 'SortItem', Function (E) {
  E.PreventDefault ();
  var href = $ (this) .attr ('href');
  Ajaxglobals ({
    URL: href,
    Data: {
      _Mnemoname: $ (this) .data ('Plainmnemo'),
      _StackName: $ (this) .data ('PlainStack'),
      _Pocketnum: $ (this) .data ('Plainpocket'),
      _Diameter: $ (this) .data ('PLAINDIAM'),
      _Thickness: $ (this) .data ('Plainthick'),
      _stal: $ (this) .data ('Plainstal'),
      _Gost: $ (this) .data ('PlatingSt')
    },
    SUCCESS: FUNCTION (DATA) {
      $ ('# DialogContent2'). HTML (Data.ResultHTML);
      $ ('. Table-Custom'). TableHover ();
      $ ('# moddialog2'). Modal ('Show');
    }
  });
});

Visual view What happens when opening the first modal window:

As can be seen, the second modal window is located under the first:

Closing the first modal window: the whole page becomes not active

Someone came across this?

UPD: I tried to insert a model one in another like this:

& lt; div id = "moddialog" class = "modal fade" data-backdrop = "static" & gt;
    & lt; div id = "moddialog2" modal = "modal2 fade2" data-backdrop = "false" & gt;
      & lt; div id = "dialogcontent2" class = "modal-dialog2" & gt; & lt; / div & gt;
    & lt; / div & gt;
    & lt; div id = "dialogcontent" class = "modal-dialog" & gt; & lt; / div & gt;
  & lt; / div & gt;

and the result is the output of the second modal window at one level, as the first modal window:

How to hang the second on top of the first I do not understand

Answer 1

My decision is quite primitive and simple.

The second modal window I set the z-index parameter (a little more, and turned off the “modality” of this window attribute data-backdrop = "false"

& lt; div id = "moddialog2" modal = "modal2" data-backdrop = "false" style = " Position: Absolute; z-index: 2000; "& gt;
& lt; div id = "dialogcontent2" class = "modal-dialog" style = "position: absolute; z-index: 2010;" & gt; & lt; / div & gt;