AnsweredAssumed Answered

Modal Window Does Not Popup

Question asked by Caesar Yu on Aug 30, 2017

We've customized the file /custom/base/views/profileactions/profileaction.hbs for the purpose that when user clicks "Log Out" in the top menu bar, a customized modal window will popup. Below is the code segment of the modal window:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" style="color:white;">×</button>
<h4 class="modal-title">Exit</h4>
</div>
<div class="modal-body" >
<h1><p>Are you sure you want to log out?</p></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="logoutCloseButton" style="width:100px;">Yes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" style="width:100px;">No</button>
</div>
</div>
</div>
</div>

 

This code works fine in our development environment (Window 7 with Service Pack 1, FireFox version 50). However, the modal window does not popup in our production environment (Windows Embedded Standard with Service Pack 1, FireFox version 46). After investigation in FireFox's Developer Tool by setting a break point at the event listener "click.modal.data-api" in the file sugar_sidecar.min.js:
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this),
href = $this.attr('href'),
$target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), <<< Break point is set here
option = $target.data('modal') ? 'toggle' : $.extend({
remote: !/#/.test(href) && href
}, $target.data(), $this.data())
e.preventDefault()
$target.modal(option).one('hide', function () {
$this.focus()
})
})

 

We found that in the production environment:
1. The value $target->context->scrollingElement is null.
2. An attribute "aria-hidden" is rendered for the modal window, with its value set to true:
<div id="myModal" class="modal fade" role="dialog" aria-hidden="true" style="display: none;">

 

So, could you help explain to us: 
1. What's that scrollingElement for? Whether the modal window not popup is caused by scrollingElement becomes null? And how can we fix this problem?
2. What's that aria-hidden attribute? Will it affects the display of the modal window? 

Outcomes