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>
Related
i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!
How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});
I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.
It's a somewhat complicated set up but I'll do my best to explain it.
The modal definition looks like this:
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<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 id="concert-modal-title" class="modal-title"></h4>
</div>
<div id="concert-modal-body" class="modal-body">
</div>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.
The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.
<ul class="nav nav-tabs nav-justified nav-justify">
<li class="active">Basic </li>
<li>Media </li>
<li>Tickets </li>
</ul>
<form id="concert-form" action="#" class="form-horizontal">
<div class="hidden">
<input type="text" name="Mode" id="Mode">
<input type="text" name="ConcertID" value="{{ConcertID}}">
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
</form>
I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.
Any ideas?
You have your footer outside the modal-content div.
Structure should go:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
You have it as this (your missing a div in the html you posted btw):
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
</div>
<div class="modal-footer"></div>
</div>
</div> <!--missing div in the example you posted here-->
Functioning code below so you can see the correct structure in action:
$(document).ready(function(){
$('#concert-modal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<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 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
</div>
<div id="concert-modal-body" class="modal-body">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
</div>
</div>
I want to show a popup box after a successful update. What i did is
In controller
var objContext = new KnittingdbContext();
objContext.ProductTypes.Attach(producttype);
var obJBlog = objContext.Entry(producttype);
obJBlog.Property(a => a.ProductTypeCode).IsModified = true;
obJBlog.Property(a => a.ProductTypeName).IsModified = true;
objContext.SaveChanges();
TempData["SuccessEdit"] = "a";
return RedirectToAction("vwProductTypeIndex");
and in vwProductTypeIndex view
#if (TempData["SuccessEdit"] != null)
{
<div class="green">
<p style="color:green;">Updated Successfully</p>
</div>
}
But the problem is this only shows a text.
I have a message box created using css
<!--popup model-->
<div class="modal fade" id="basic" role="dialog" aria-labelledby="basic" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="background-color:#ffffff; borderolid 4px #44d775;margin-top:253px; left:-25px;">
<div class="modal-header" style="background-color:#44d775; height:15px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:-12px;">x</button>
<span class="glyphicon glyphicon-ok" style=" color:yellow; font-size:large; top:-10px; left:115px;" aria-hidden="true"></span>
<h4 class="modal-title" id="myModalLabel" style="text-align:center;"></h4>
</div>
<p style="text-align:center; font-family:'Ebrima'; color:black; margin-top:15px;"> <strong> saved Successfully </strong></p>
</div>
</div>
</div><!--/end popup model--
I want this popup box to appear instead of that text. How can i achieve this? Thanks in advance!
try to your div tag and pass the id
<div class="green" data-toggle="modal" data-target="#basic">
<p style="color:green;">Updated Successfully</p>
</div>
You can use the Bootstrap modal here like this
#if(TempData["SuccessEdit"] !=null)
{
<div class="modal fade" 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">Change Password</h4>
</div>
<div class="modal-body">
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
}
First add your modal in end of your body tag, or wherever you want, like this:
<body>
<!-- your other codes -->
<div class="modal fade" id="basic" role="dialog" aria-labelledby="basic" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="background-color:#ffffff; borderolid 4px #44d775;margin-top:253px; left:-25px;">
<div class="modal-header" style="background-color:#44d775; height:15px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:-12px;">x</button>
<span class="glyphicon glyphicon-ok" style=" color:yellow; font-size:large; top:-10px; left:115px;" aria-hidden="true"></span>
<h4 class="modal-title" id="myModalLabel" style="text-align:center;"></h4>
</div>
<p style="text-align:center; font-family:'Ebrima'; color:black; margin-top:15px;"> <strong> saved Successfully </strong></p>
</div>
</div>
</div>
</body>
And in scripts section add following code:
#section Scripts {
#if((bool?)TempData["SuccessEdit"] ==true)
{
<script type="text/javascript">
$(document).ready(function(){
$('#basic').modal('show');
});
</script>
}
}
Now you could add following line in your action method:
TempData["SuccessEdit"] = true;
You must also add jQuery and bootstrap.js in your view as well.
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;
}
I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<
I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>