I have a common modal that would be invoked from various places in different forms. I'm trying to write a common code for it in a separate file and invoke it. If code for Modal is included in the same file as button invoking it, it works fine. But if I place code for Modal form in a separate file, it doesn't open Modal form.
Here is the code of button invoking Modal form:
Edit
Here is the code of Modal Form in a different HTML file, "Modal.html":
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Club Search Result</h4>
</div>
<div class="modal-body">
<p id="dispMsg"> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Search Again</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Related
I have a very basic question. I am developing a login page in .cshtml format. Now I want to implement a modal in bootstrap without using a button. Like if the "condition is wrong" in login credentials then show the modal. I give you the condition below.
technically I see lots of bootstraps available with buttons but I do not want that. I want the modal to execute automatically. or the HTML part of the modal to get triggered without a data target.
#if (ViewContext.ModelState.IsValid == false)//condition for login failure, its in a file called _validation summary.cshtml
{
// Modal html we may change it.
<div class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
Thanks in advance,
Jay
You can use the JQuery to invoke a modal, like
$('#modalId').modal("show");
$('#modalId').modal("hide");
$('#modalId').modal("toggle");
I am trying to make a Bootstrap modal, but right now when I open it up it inserts the html from the entire page and inserts it into my modal. I copied the sample modal straight from w3schools and I'm not using any JQuery to dynamically update it or anything.
When the modal is hidden the html shows me the correct structure: My navbar, content, then the hidden modal with the proper modal content. When I show the modal everything messes up. The same structure exists with the navbar, then content, then modal (not hidden as it should be). However, this time inside the modal is the html from the rest of the page repeated. A second modal along with the correct modal content is buried inside of the repeated html content, but it is also hidden. The result is that I see two versions of the body content, one in front of the other. When I hide the modal everything goes back to normal.
In other words this:
<!-- 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Keeps getting changed to this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<meta></meta>
<title></title>
<script></script>
<div class="navbar"></div>
<div class="container"></div>
<!-- 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I should also point out that it does not duplicate tags such as head or body. It really doesn't make sense to me why the inside of the modal div is being changed at all when I want it to remain static. Any help is appreciated, thank you.
i use bootstrap on my website and i have modals which were working perfectly.
Since yesterday, my modals are not usable anymore. The grey background which should cover the area around the modal is now on the whole page. Thus, it's impossible to click on the modal or to use it. I have to reload the page manually.
Here is a screenshot :
I use the last version of Bootstrap (3.3.7). Even with the most basic modal exemple from official Bootstrap documentation it does the same :
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I don't know where it could come from, since it's a bought template i didn't create myself.
Thank you in advance for any help
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>
I'm making an application form that's on a modal and I made it so the user can upload their picture on the application form. So I have my thumbnail with a "upload picture" bubble inside it, and when I click it, a modal pops up. However the problem is when I click on "cancel" or "upload" on my "upload picture" modal, it closes both modal windows (application form and upload picture).
I'm using bootstrap and here's a snippet of my code:
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Application Form</h4>
</div>
<!-- START OF MODAL BODY-->
<div class="modal-body">
<div class="col-sm-5">
<div class="thumbnail">
<div class="avatar">
<a href="#" class="thumbnail bottom-15" data-toggle="modal" data-target="#upload-avatar">
<img src="img/face1.jpg" alt="...">
</a>
<!-- Upload new avatar bubble -->
<div class="avatar-bubble">
<i class="fa fa-plus"></i> Upload new avatar
</div>
</div>
</div>
</div>
<!--Modal for uploading photo-->
<div class="modal fade" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4>
</div>
<div class="modal-body">
<p>Please choose a file to upload. JPG, PNG, GIF only.</p>
<form role="form">
<div class="form-group">
<label for="file">File input</label>
<input type="file" id="file">
<p class="help-block">Files up to 5Mb only.</p>
</div>
<button type="button" class="hl-btn hl-btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="hl-btn hl-btn-green" data-dismiss="modal">Upload</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div> <!-- END OF APPLICATION FORM MODAL BODY -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Basically I put my second modal within my first modal.
Although the Bootstrap 3 docs say "Overlapping modals are not supported..", I think I found a workaround that works. You need to..
Make sure your 2nd modal's markup is outside the body of the 1st modal
Manually close the 2nd modal by using the Bootstrap modal toggle method in jQuery.
Change the z-index of the 2nd modal so that it appears over the first.
http://bootply.com/108243
Also, I changed your markup to remove the fade and `display:none'.
I've opened a modal from another modal. I call it 'modalception'. It sounds like you just need to make sure your events are targeting the correct modal.
I have overlapping modals, and they work as expected. Clicking the background of the second modal closes that modal only, not the one behind it.
Just set the z-index correctly. Be sure not to nest them, and it should work just fine. It is not "supported", but I do it all the time. A project I am currently working on stacks 3 on top of each other with no problems.
I am using Bootstrap v3.3.2 and jQuery 1.11.2.