html - Bootstrap 4 Modal on Modal. How to show the grey background behind the top modal

I have a requirement to show a modal box on top of the another modal box. Everything works fine. But the grey background always show for the lowest modal. I want the grey background to show behind top most modal when it is open. I use javascript to open the second modal.

Html Code:

<!--begin::Modal-->
<div class="modal" id="profile_modal" tabindex="-1" aria-hidden="true" style="max-height: 1000px; overflow-y: auto;"  >
    <div class="modal-dialog  ">
        <div class="modal-content">
                 <div class="modal-header">
                    <h2 class="modal-title"><b><span id="firstname"></span>&nbsp;<span id="familyname1"></span></b></h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                    </button>                                       
                 </div>                             
                <div class="modal-body">
                    <input style="display:none;" type="text" class="form-control m-input" id="profileid" name="profileid"
                                value ="" > 
                     <div class="text-center">
                        <button type="button" id="m_intro" class="btn btn-info">Suggest for Me&nbsp;<span id="spnlock"><i class="fa fa-lock"></i></span></button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="m_suggest" class="btn btn-primary">Send to Friend</button>                                       
                     </div> 
                </div>
        </div>
    </div>
</div>
<!--end::Modal-->   

<!--begin::Modal style="border:black 2px solid;"-->
<div class="modal" id="suggest_modal"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" >
                <div class="modal-header" style="background-color:#5bc0de;"> 
                    <h4 class="modal-title">Suggest  <span id="sfirstname"></span>  for a Friend</h4>   
                    <button type="button" class="close" id="suggest_close" name="suggest_close" >&times;</button>                                       
                </div>                              
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary col" id="m_send" name="m_send"  >Send</button>
                </div>                                  
        </div>
    </div>
</div>
<!--end::Modal-->

Javascript :

$('#m_suggest').click(function(e) {
    $('#suggest_modal').modal('show');
});

Html Code:

<!--begin::Modal-->
<div class="modal" id="profile_modal" tabindex="-1" aria-hidden="true" style="max-height: 1000px; overflow-y: auto;"  >
    <div class="modal-dialog  ">
        <div class="modal-content">
                 <div class="modal-header">
                    <h2 class="modal-title"><b><span id="firstname"></span>&nbsp;<span id="familyname1"></span></b></h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                    </button>                                       
                 </div>                             
                <div class="modal-body">
                    <input style="display:none;" type="text" class="form-control m-input" id="profileid" name="profileid"
                                value ="" > 
                     <div class="text-center">
                        <button type="button" id="m_intro" class="btn btn-info">Suggest for Me&nbsp;<span id="spnlock"><i class="fa fa-lock"></i></span></button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="m_suggest" class="btn btn-primary">Send to Friend</button>                                       
                     </div> 
                </div>
        </div>
    </div>
</div>
<!--end::Modal-->   

<!--begin::Modal style="border:black 2px solid;"-->
<div class="modal" id="suggest_modal"  tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" >
                <div class="modal-header" style="background-color:#5bc0de;"> 
                    <h4 class="modal-title">Suggest  <span id="sfirstname"></span>  for a Friend</h4>   
                    <button type="button" class="close" id="suggest_close" name="suggest_close" >&times;</button>                                       
                </div>                              
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary col" id="m_send" name="m_send"  >Send</button>
                </div>                                  
        </div>
    </div>
</div>
<!--end::Modal-->

Javascript :

$('#m_suggest').click(function(e) {
    $('#suggest_modal').modal('show');
});

Share Improve this question asked Apr 1 at 11:09 arun kumar 7352 gold badges15 silver badges38 bronze badges

.modal-backdrop gets z-index: 1040; by default, so you need to set your first .modal to a lower z-index, but only when the second one is open. – C3roe Commented Apr 1 at 11:54

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You need to adjust z-index for each modals and backdrops

You also need the data attribute for dismiss on the inner close

// Function to open the first modal
function openProfileModal() {
  $('#profile_modal').modal('show');
}

// Function to open the second modal on top of the first
$('#m_suggest').click(function(e) {
  // Make sure the first modal is open (if not already)
  if (!$('#profile_modal').hasClass('show')) {
    $('#profile_modal').modal('show');
  }

  // Open the second modal
  $('#suggest_modal').modal('show');

  // Adjust z-index for modals and backdrops
  setTimeout(function() {
    // Set z-index for the first modal and its backdrop
    $('#profile_modal').css('z-index', 1050); // First modal
    $('.modal-backdrop').not(':last').css('z-index', 1040); // Backdrop for first modal

    // Set higher z-index for the second modal and its backdrop
    $('#suggest_modal').css('z-index', 1060); // Second modal
    $('.modal-backdrop:last').css('z-index', 1055); // Backdrop for second modal
  }, 0); // Timeout to make Bootstrap apply defaults first
});

// Reset z-index when the second modal is closed
$('#suggest_modal').on('hidden.bs.modal', function() {
  $('#profile_modal').css('z-index', ''); // Reset to default
  $('.modal-backdrop').css('z-index', ''); // Reset backdrop z-index
});

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><button type="button" onclick="openProfileModal()">Open Profile Modal</button>
<!--begin::Modal-->

<div class="modal" id="profile_modal" tabindex="-1" aria-hidden="true" style="max-height: 1000px; overflow-y: auto;">
  <div class="modal-dialog  ">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title"><b><span id="firstname"></span>&nbsp;<span id="familyname1"></span></b></h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <input style="display:none;" type="text" class="form-control m-input" id="profileid" name="profileid"
                                value ="" >
        <div class="text-center">
          <button type="button" id="m_intro" class="btn btn-info">Suggest for Me&nbsp;<span id="spnlock"><i class="fa fa-lock"></i></span></button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="m_suggest" class="btn btn-primary">Send to Friend</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--end::Modal-->

<!--begin::Modal style="border:black 2px solid;"-->
<div class="modal" id="suggest_modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#5bc0de;">
        <h4 class="modal-title">Suggest <span id="sfirstname"></span> for a Friend</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="suggest_close" name="suggest_close" >&times;</button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary col" id="m_send" name="m_send"  >Send</button>
      </div>
    </div>
  </div>
</div>
<!--end::Modal-->

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Bootstrap 4 Modal on Modal. How to show the grey background behind the top modal - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)