We Keep Coding

TinyMCE in modal, modal won't reopen after passing data to div

I'm currently running an HTML template that has a placeholder div, and when the user clicks inside the div, a modal pops up with an instance of TinyMCE. So far so good.
TinyMCE works here as far as adding text/content, and then you hit a button that closes the modal and passes the content into the placeholder div in the same format. (Think of it like the user viewing a template for a static page, they want to insert content so the modal allows them to use TinyMCE to do so and then they hit the button to view it in the 'live' template).
Anyway, this works fine. The problem is, if you notice an error or typo and need to call TinyMCE again, It won't work. Once the content passes to the div, it no longer triggers the modal when clicking in the div. I'm not a JavaScript expert by any means so I'm sure something is wrong on that side.
Here's the code. Everything works as expected, but I just need to be able to keep the action of clicking the div and loading the modal to edit the content from TinyMCE:
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modalFull = $('#fullModal').modal({
show: false
});
$('.fullWidth').on('click', function() {
$modalFull.modal('show');
});
$(document).ready(function() {
$("#form-data3").submit(function(e) {
var content3 = tinymce.get("mytextarea3").getContent();
$(".fullContent").html(content3);
jQuery.noConflict();
$('#fullModal').modal('hide');
$('.modal-backdrop').remove();
return false;
});
});
</script>

With $(".fullContent").html(content3);, you are overwriting the modal's markup.
Place it outside that div.
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>

Don't load the modal if the the value is empty onload

I want to show modal only after form gets submitted.but It's loading at starting.
Here is my html code
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Dear User</h4>
</div>
<div class="modal-body">
<p>Please note down your respective ID's</p>
<p id="ucid">Client ID:<s:property value="ucid"/></p>
<p>Broker ID:<s:property value="ubid"/></p>
<p>Developer ID:<s:property value="udid"/></p>
</div>
</div>
</div>
</div>
</div>
and here is Javascript
function myFunction(){
if ($('#ucid').val()=='') {
$("#myModal").modal("hide");
}else{
$('#myModal').modal('show');
}
though i tried above function to hide that.but its not working.please help me out.Thanks in advance

You should use .text() method to get value from p DOM element.
if ($('#ucid').text()=='') {
$("#myModal").modal("hide");
}else{
$('#myModal').modal('show');
}

multi bootstrap modal in one page issue

I have several card in a page, I rendered all of them with a loop, I want when user clicked on each one , related modal show to user, I implement that with following snippet
{% for i,item in node.field_what_you_will_build %}
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="lbl"> {{ 'Project'|t }}</div>
<div class="title">{{ item.first }}</div>
<div class="desc">{{ item.second }}
</div>
<div class="badge">{{ i+1}}</div>
<div class="shadow-wrapper">
</div>
</div>
{% endfor %}
when I click on cards modal getting show correctly but when click close modal disappear but background getting dark, when I inspect my markup I saw
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
added to end of body.where is the problem? is my solution is correct to implement multi bootstrap modal on a page? if not what is the true solution?
it seems when I click on close some <div class="modal-backdrop fade in"></div> add to my markup

I found the solution for this issue, the problem occur because Modal markup was inside the element cause modal triggered on click, I mean the the problem is
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
**So solution is **
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
</div>
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
I mean Don't Put Modal Content inside the element cause modal triggered

slimScroll- doesn't work good in the second modal

I have 2 modals (when the first is close the second is open) the code of the first modal in a template (gsp) and the of the second one is in the view page
The code I use for close the first and open the second is:
function openModal(){
if($('.invitePartners').valid()){
$('.invite-contacts-modal').modal('hide')
$('.modal-backdrop').remove();
$('#mySecModal').modal();
}
The html for the second modal:
<div class="modal fade" id="mySecModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog signup-modal">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title light-green"><g:message code="signup.redesign.invitepartners.modal.title"/></h4>
</div>
<div class="modal-body">
<g:message code="signup.redesign.invitepartners.modaldetails.header"/><br><br>
<span>${user?.firstname}</span><span> ${user?.lastname} </span><g:message code="signup.redesign.invitepartners.modaldetails.body"/>
</div>
<div class="modal-footer">
<g:message code="buttons.dontsend"/>
<button name="next" class="signup-button skyblue-btn pull-right pl-pr-36" >${message(code:"buttons.ok")}</button>
</div>
</div>
</div>
</div>
In the first modal the scroll works fine.
I the second modal the user can scroll until he get to the end of the modal (which is cut).
I use scrollSlim plugin

Modal window scrolling

I have the modal window (bootstrap 3):
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
</div>
By clicking on "NEXT" button, #modal1 is closing and #modal2 is opening:
<div class="modal fade" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT //lots of text
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="EXIT" data-dismiss="modal"/></form>
</div>
</div>
</div>
Scrolling is working fine in the first modal window #modal1, but in the #modal2 it is not working, there is not even the scrollbar.
So, the question is: How to make the scrolling work in the second window?
UPD: added jsfiddle: http://jsfiddle.net/386ozdb7/2/

If you indent your code correctly you can see that div with class "modal-footer" are not inside the div with "modal-content" as the documentation suggest. Maybe that can be the problem of scrollbar with a lot of text
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
Try to change your 2 modals as below:
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
</div>
</div>
check the bootstrap example at: http://getbootstrap.com/javascript/#modals
ps: always indent your code.. it's useful to reduce markup error!

Thats the problem: http://getbootstrap.com/javascript/#overlapping-modals-not-supported
Overlapping modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
This may help you: https://github.com/jschr/bootstrap-modal

Solution:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}