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"
Related
enter image description hereHi I have an action that returns partial view I want to call it partial twice from view after once inside a modal and once outside the modal to fit the site to mobile. I use #html.action what actually happens is that there are events on click in partial and the js always listens only to the first and the one I put second inside a modal for example does not work. If I change their order on the page it will be reversed. Looking for a solution how to call that partial.
my code:
#Html.ActionLink("Search", "Cars")
<div class="modal fade carDetielsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<button class="close" aria-label="Close" data-dismiss="modal">
#*<span aria-hidden="true">×</span>*#
<img src="~/images/icon_X (1).png" />
</button>
</div>
<div class="modal-content">
#Html.Action("Search", "Cars")
</div>
</div>
</div>
</div>
#Html.ActionLink("Search", "Cars")
I have a modal which appears when a button is clicked but the links present inside the modal appears before even opening the modal, they are invisible though but they are present because if a user clicks on the page the link inside the modal gets clicked.
To see it, open filemile.ga and hover your mouse over the logo.
<button type="button" class="btn btn-info btn-sm " data-toggle="modal" data-target="#myModal">more</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" >
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Top Searches</h2>
</div>
<div class="modal-body">
lots of links here
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Replace <div class="modal fade" id="myModal" role="dialog" > with <div class="modal fade hide" id="myModal" role="dialog" >
This hide class will set your modal inaccessible, bootstrap will take it off when you click the button.
This site you commented uses Bootstrap 2.3 link to documentation. If you edit it, this site will help you.
I just and a CSS style that seems to resolve.
On the first div of the Modal, whose the id is myModal just add the flolowing:
<div class="modal fade" id="myModal" role="dialog" style="display:none;">
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'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>
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