I have the same issue as this question although my circumstances are slightly different, none of the solutions provided work for me.
I have a bootstrap modal dialog inside an ASP update panel with a tinyMCE control which works fine apart from any modal popups from tinyMCE - all input controls are non focus-able, clicking and tabbing has no effect.
The general consensus is to use e.stopImmediatePropagation()
although this does nothing in my setup.
<asp:Panel ID="EditShowDetailsPanel" runat="server" CssClass="modal fade" TabIndex="-1" role="dialog" aria-labelledby="EditShowDetailsPanel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<asp:UpdatePanel ID="EditShowDetailsUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-header">
<h4 class="modal-title">Edit Show Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<asp:TextBox ID="ShowInfoTextBox" TextMode="MultiLine" runat="server" ClientIDMode="Static" />
....
</div>
</div>
</div>
<div class="modal-footer">
<asp:LinkButton ID="SaveEditShowDetailsLinkButton" runat="server" OnClientClick="mceSave();" OnClick="SaveEditShowDetailsLinkButton_Click" CssClass="btn btn-success">Save Changes</asp:LinkButton>
<button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Cancel</button>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Panel>
<script type="text/javascript">
function mceSave() {
//save contents to textbox
tinyMCE.triggerSave();
}
function pageLoad() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
//remove mce editor
tinymce.execCommand('mceRemoveEditor', true, 'ShowInfoTextBox');
}
//TinyMCE init
$(document).ready(function () {
tinymce.init({
selector: "textarea#ShowInfoTextBox",
menubar: false,
theme: "modern",
height: 300,
plugins: [
"link lists hr anchor media code"
],
toolbar: "undo redo | bold italic underline | bullist numlist | link | media | code"
});
});
}
</script>
The Bootstrap modal has a feature that prevents focusing of any elements outside the modal itself. This can be seen in the Bootstrap modal code (the enforceFocus
function). Since the TinyMCE dialogs are rendered outside the bootstrap modal, the modal does not allow them to be focused.
In Bootstrap 4, this functionality can be disabled by setting focus: false
in the modal configuration.
In Bootstrap 3, this functionality cannot be suppressed. Here are two possible workarounds:
Override the enforceFocus
function before the Bootstrap modal is initialized, via
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
This will disable the feature for all modals thereafter.
Remove the focus event handler once the dialog has been initialized.
$(document).off('focusin.bs.modal');
This will disable the functionality in the currently opened modals, but newly opened ones will still have it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With