I'm using bootstrap 3 modals using the remote path option as follows.
view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--- content from mystuff.htm will appear here --->
</div>
</div>
</div>
This works fine, but instead of clicking the link I want to open the modal programmatically!
I'm trying to avoid triggering a click() event on the link if possible.
As of 3.2.1 the remote option is deprecated and will be removed in future versions. It is advisable to load the content explicitly and then call the show method to open the modal:
$('#modCurIssue').find('.modal-content').load( 'mystuff.htm', function() {
$('#modCurIssue').modal( 'show' );
});
According to the methods section on http://getbootstrap.com/javascript/#modals it's quite easy:
$('#modCurIssue').modal('show')
view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="mystuff.htm"></iframe>
</div>
</div>
</div>
Related
Well, recently spotted some weird activity: I have a Bootstrap 3 modal box, that activates via data-attributes. Here is my HTML:
<li data-toggle="modal" data-target="#modalImage" class="quickview" data-img-src="<IMG SRC by Laravel Blade>">
<img src="<IMG SRC by Laravel Blade>" alt="<IMG ALT by Laravel Blade>">
</li>
And the modal box itself:
<!--modal-image-->
<div class="modal fade" id="modalImage" tabindex="-1" role="dialog" aria-labelledby="modalImage" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content" style="background-color:rgba(255,255,255,.8)!important">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-center">
<img class="modal_image" src="" />
</div>
</div>
</div>
</div>
And here is my JavaScript (I use it because this modal is used for opening a bigger image on click, and images are inside the image gallery (bxSlider)):
/* Open Modal box for larger image; */
$(".quickview").on("click", function() {
var $this = $(this);
var imgSrc = $this.data("img-src");
$(".modal-body > img.modal_image").attr("src", imgSrc);
$('#modalImage').modal('show');
});
The problem (and the weirdness) is that it works on every browser I tested, but Chrome. It even works on IE and Edge (that is based on Chromium). In Chrome nothing happens, no Console error messages, anything.
Any ideas?
P.S. And yes - my JS is wrapped with $(document).ready, so it executes only when page is loaded
It seems like latest chrome broken down modal display on Chrominium using latest version. I also have same issues as well.
I am using bootstrap modal popup to show a a message. When I am using the below statement inside a html frame then modal dialog is getting disappear when user click anywhere in the body . My requirement is to prevent this popup to disappear.
$('#testModel').modal({backdrop: 'static', keyboard: false});
<div class="modal fade" id="testModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body err-cnct">
<h2><i class="demo-icon fa-lg icon-cancel"></i></h2>
<p> <h4 class="modal-title">Connection Error!</h4>
Connection to the Hub has been lost. <br/>Please check power and Ethernet connections. </p>
</div>
</div>
</div>
</div>
Thanks.
See the documentation here. Set a data attribute as such:
data-backdrop="static"
So I have two modals which are triggered depending on the button I click
The first one is trigeered like this:
<a id="de_details" data-toggle="modal" data-target=".show-de-banks"> </a>
And it is built this way
<div class="modal fade show-de-banks" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
bla bla
<div class="modal-body">
bla bla
</div>
<div class="modal-footer">
bla bla
</div>
</div>
</div>
</div>
An the second one is called using a button:
<button class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
And it is built the same way:
<div class="modal fade open-dialog" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
dsfgdfg
</div>
<div class="modal-body">
sdgfsdgsd
</div>
<div class="modal-footer">
sdfds
</div>
</div>
</div>
</div>
When I open the first one, I have no issue.
But when I want to open the second one, it disappear as soon as it has appeared.
I know that:
I have to include only one js bootstrap file
My scripts have to be at the end (for the sake of page rapidity loading)
Do I miss something?
As says comment of Ubiquitous Developers Bootstrap modal issue (not able to show the second modal) you should give button type as button
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".open-dialog">Open dialog with IT-Team</button>
This is an old question, but I had the same issue and found this.
In your first modal, your div with class modal-header isn’t closed - you’re missing a </div>.
This means that the second modal will sort of be inside the first, which causes issues.
I found the issue by looking in the Elements tab of Chrome’s F12 tools, which shows issues like this well.
Looking at some video tutorials I follow what has been done but don't seem to get to modal of the register link to trigger.
Here is the link I want to trigger:
<li>Register</li>
Here is the modal that should be triggering
<!-- Register Modal -->
<div class="modal fade" id="#register-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
</div>
</div>
</div>
I assume that there should be jQuery to be implemented after looking at other answers but i do not see how come if the jQuery comes from the bootstrap. The Bootstrap 3 documentation seems to do the same as I did http://getbootstrap.com/javascript/#modals-examples
The id attribute shouldn't have a hashtag.
Change
<div class="modal fade" id="#register-modal" role="dialog"></div>
to:
<div class="modal fade" id="register-modal" role="dialog"></div>
Working Example
I've an problem with modal box in Bootstrap3.
My code:
<a data-remote="{{ path('popup_pages', {'page': 'cgu'}) }}" data-toggle="modal" data-target="#MyModal">Try</a></p>
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
The link is OK, I can retrieve the content without modal.
Now, I want to inject in the modal-content my page at the link {{ path('popup_pages', {'page': 'cgu'}) }} (don't take care about syntaxe, I use Twig, but an good link is generate).
For the moment, when I click on the link, it remove my html and only display a mailto (weird...) without changing page.
If I remove the data-remote and hard code content in modal-content, this work.
Any idea?
Thanks for help