kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Modal plugin set _isTransitioning after the trigger of hide event

This commit is contained in:
Johann-S 2017-10-10 13:19:39 +02:00
parent da22bce2f0
commit 8e7ba02c5c
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/modal.js
View File

@ -169,12 +169,6 @@ const Modal = (() => {
return
}
const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
if (transition) {
this._isTransitioning = true
}
const hideEvent = $.Event(Event.HIDE)
$(this._element).trigger(hideEvent)
@ -185,6 +179,12 @@ const Modal = (() => {
this._isShown = false
const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
if (transition) {
this._isTransitioning = true
}
this._setEscapeEvent()
this._setResizeEvent()

22
js/tests/visual/modal.html
View File

@ -171,6 +171,12 @@
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22; role=&#x22;dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22; role=&#x22;document&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;close&#x22; data-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
Modal with an XSS inside the data-target
</button>
<br><br>
<button type="button" class="btn btn-secondary btn-lg" id="btnPreventModal">
Launch prevented modal on hide (to see the result open your console)
</button>
</div>
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
@ -203,6 +209,22 @@
$('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
$('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
})
$('#btnPreventModal').on('click', function () {
$('#firefoxModal').one('shown.bs.modal', function () {
$(this).modal('hide')
})
.one('hide.bs.modal', function (event) {
event.preventDefault()
if ($(this).data('bs.modal')._isTransitioning) {
console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
} else {
console.log('Test passed')
$(this).modal('hide') // work as expected
}
})
.modal('show')
})
})
</script>
</body>