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>

Bootstrap Modal - catch link click inside modal?

I'm trying to catch a "click on a link" inside a bootstrap modal, but for some reason it is not working.
$(document).ready(function() {
$('#menu-mobile a').click(function() {
alert();
});
});
<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Menu</h4>
</div>
<div class="modal-body">
Link 1
Link 2
</div>
<div class="modal-footer">
<button type="button" class="button xsmall" id="closeForm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What am I doing wrong?

You could use event delegation .on() like :
$(function(){
$('body').on('click', '#menu-mobile a', function() {
alert();
});
});
NOTE: You should remove one of the id's in your modal since you've two now id="menu" & id="menu-mobile".

First of all you have id attribute twice on your modal element:
<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
assuming you'll change it to
<div class="modal fade" tabindex="-1" role="dialog" id="menu-mobile">
then to access even dynamically generated content within the modal, run:
$('#menu-mobile').on('show.bs.modal', function (e) {
alert();
});

How to close a dialog box in angularjs

I am showing a popup for signup form and in that when i click on terms i am showing another popup but the problem is when i close the terms popup the previous signup modal is also closing.
HTML
<div class="modal-header">
<h3 class="login-header" ng-if="showLoginForm" >Login to your account. Don't have an account? Register for free!</h3>
<p class="register-header" ng-if="showRegForm" >Please register for <b>free!</b> We collect certain information about you to provide personalized recommendations. (Don't worry) We will never share your personally identifiable information. [Read More]</p>
<h3 class="register-header" ng-if="showForgotForm" >Reset password</h3>
</div>
<div class="modal-body paddingmodal2">
<div class="col_full">
<input type="checkbox" ng-class="{'error': submitted && registerLoginForm.terms.$error.required}" name="terms" value="check" id="agree" ng-model="register.terms" required/> I agree to the XpertDox Terms of Use & Privacy Policy.
</div>
</div>
<div class="modal fade termmodal" id="terms-model" tabindex="-1" role="dialog" aria-labelledby="myModaqlLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div ng-include="'app/templates/terms-model.html'"></div>
</div>
</div>
</div>
</div>
<div class="modal fade termmodal" id="policy-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div ng-include="'app/templates/policy-model.html'"></div>
</div>
</div>
</div>
</div>
JS
$scope.termsandPolicy = function(type){
if(type == 'terms'){
$scope.showTerms = true;
$('#terms-model').modal('show');
}else{
$('#policy-model').modal('show');
}
I just put above code in my main modal ,can anyone help me please.

It's happening because both modal are in same main model as well as controller and within same model.If you change one of the model to $rootScope then it will be resolved.

bootstrap modal show with black disabled background

I have a bootstrap modal like:
<div class="modal show" id="myModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>My Modal Body</p>
</div>
</div>
</div>
</div>
It shows me the model at start but what I want is the background to be black.. or say like transparent when this modal appears and the background should be disabled ..
How can I do that?

If you use the class modal show you can manually add <div class="modal-backdrop fade in"></div>, so the resulting code looks like:
<div class="modal show" id="myModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>My Modal Body</p>
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade in"></div>
If you use modal fade as class, the modal-backdrop should appear automatically.
See: http://jsfiddle.net/dvv6dvug/

Dynamically update modal div

So I am creating a help page that contains instructions on setting up email with Outlook. I am going to have 3 sets of instructions for the different versions of Outlook 2010, 2007 and 2003. Off to the side of the various steps I have a link "Screenshot" which will open a screenshot of that particular step using bootstraps modal window.
Screenshot
Here is my question: Is there a way to dynamically create or recycle the modal div? The only thing that changes is the main div id and the img src. Otherwise I will end up with 30 divs that are pretty much the same. Thanks in advance!
<div id="ss-outlook2010-1" class="modal large hide fade" tabindex="-1" role="dialog" aria-labelledby="Outlook 2010" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Outlook 2010</h3>
</div>
<div class="modal-body">
<a><img src="images/screenshots/ss-outlook2010-1.png" title="Outlook 2010" alt="Outlook 2010"></a>
</div>
</div>

Why not:
<div id="ss-outlook" class="modal large hide fade" tabindex="-1" role="dialog" aria-labelledby="Outlook 2010" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Outlook 2010</h3>
</div>
<div class="modal-body">
<div id="outlook-2003" style="display: none;">
</div>
<div id="outlook-2007" style="display: none;">
</div>
<div id="outlook-2010" style="display: none;">
</div>
<div id="outlook-2012" style="display: none;">
</div>
</div>
</div>
Then use JavaScript to decide which of the Outlooks you show:
$('#outlook-2012').show();