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");
Related
I am trying to create a bootstrap modal to pop up when clicking a button. I watched some trailers and did the same. Nothing happens when I click the button. I also copied an modal example from bootstrap but also not working. What is wrong?
here is the code:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This should work since it is copied from bootstrap webpage but it is not working.. Please help. I am using Flask if that is of any help.
Solved. Seems like I had bootstrap v.5 and I did copy modal from bootstrap v.4. It is working now!
Anybody know bootstrap modal background issue?
flickering background pixels
jsfiddle
HTML
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
I changed .fade.in opacity property on bootstrap.min.css from 1 to 0.99: .fade.in{opacity:0.99}
and that solved the problem while a better solution appears.
* update*
try this on bootstrap.min.css
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
It looks like bug in bootstrap,
i got the same issue and i found out that it caused by elements on the page that got opacity property.
i manage to reproduce it on bootstrap site
hope it will help you.
furthermore, it happen only on chrome.
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
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 -->
Problem Description
I have two views. The first one contains a link, which when clicked, should display the second view which is my custom modal. Both files are in the same folder called school.
Code
firstView.html
<html>
<head>Click the link</head>
<body>
<div>
<a data-toggle="modal" href="secondView.html" data-target="#secondView" >Additional Details</a>
</div>
</body>
</html>
secondView.html
<!-- Modal -->
<div id="secondView" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Issue at hand
The problem is that when I click on my link, it does not display anything. I checked the console, and it does not display any errors. So, I am thinking this has to do with the way I connect these two views, probably something to do with href tag.
I would appreciate your help folks.
From http://twitter.github.com/bootstrap/javascript.html#modals:
If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body.
So you'd do
firstView.html
<html>
<head>Click the link</head>
<body>
<div>
<a data-toggle="modal" href="secondView.html" data-target="#myModal" >Additional Details</a>
</div>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<!-- Here be modal content -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</body>
</html>
secondView.html
<p>One fine body…</p>