I am building my website using Twitter Bootstrap. I found that my dialog shows "2 times". Here is a video for you if you don't know what am I talking about(expire in 7 days).
Watch this video
Note: I only clicked the Close button one time. You can see there is a dialog appeared about I clicked Close and it disappeared in less than 1 second.
Here is my code.
<div class="modal fade" id="contactModel" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<p id="modelText">Thank you! Your submission has been received!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My button calls JavaScript.
<button onclick="submitForm()" type="button" id="submit" class="btn btn-primary">Send</button>
My JavaScript
$('#contactModel').modal('show');
Can anyone help me to solve this? Thanks in advanced.
I don't see your button's code, but I guess you've been using the bootstrap modal in both ways : via data attributes and via js.
Choose one. Look here http://getbootstrap.com/javascript/#modals in "Usage".
Anyway, if it's not the button, then your code works well. here is a proof: http://www.bootply.com/eYXtmm6Yrr.
Related
<div class="modal" id="myInquiry" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 id="myModalLabel">Thank you for your feedback:</h4>
</div>
<div class="modal-body">
<label for="inquiry">Feedback:</label>
<textarea class="form-control" rows="5" id="inquiry"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="send">Send</button>
</div>
</div>
</div>
</div>
This is the code I have for my modal footer. I am wanting to click the send button and close the modal. Once it has been closed I want to have an alert window or modal pop up and thank the user for giving their feedback. I am new to web development and am getting stuck on this issue after numerous attempts (after finding different solutions on other questions) but nothing is working.
The modal's div id is 'myInquiry' if that helps.
Thank you!
You need to add an action to your modal Close button, worst way would be like:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="alert('thank you');">Close</button>
you can add the ID to the button and then use jQuery to handle the action, and show something better than this.
You can add jQuery code like this.
$('button#send').click(function() {
alert('Alert Content');
}
Then you can see the alert "Alert Content" when you click the Send Submit button.
Bootstrap modal has a hide.bs.modal event, you can listen to that event and then, when the modal is closed (hidden from user) you can show the thank modal. Here is an example on jsfiddle. Cheers, sigfried.
Maybe you can try adding an
onclick="window.alert('<Your text here>')"
attribute to the button.
I'm having an issue with a Bootstrap modal where if I change the size to small, there is a lingering backdrop modal behind it that is still large.
In the Elements window I can remove the class="modal-content" right before uib-modal-transclude and the modal behind disappears. However I am trying to apply this change in my code and can't get it to work.
First off, this code seems to be coming from uib/template/modal/window.html or https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
I am using ui_bootstrap/1.1.2
I tried to overwrite the template using windowtemplateurl and making the new template have:
<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in"
uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}"
uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true"
style="z-index: 1050; display: block;">
<div uib-modal-transclude=""><!--
<!-- Modal -->
<div class="modal-dialog modal-sm">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="Cancel()"><span
aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title ng-binding" id="notfound"> Not Found</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="Cancel()">Close
</button>
<button type="button" class="btn btn-primary">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
This didn't work. It doesn't seem like changing windowTemplateUrl changed anything at all... I also tried adding css to modal-content, however this screws up other modals on this page.
Am I on the right track? Where is this error coming from? What is the best way to fix it?
In case anyone else has this error, here is what I did to fix it.
I did find a declaration for the size of the modal to be "xl" in my code. Changed that to "sm" and there was still a wrapper around my modal that was 300x184 whereas my modal was 300x122.
I took out the class="modal-dialog" div wrapper and the second modal disappeared.
I'm new to Bootstrap and i'm facing problem with this example:
<!-- 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>
As per my understanding data-dismiss="modal" attribute should close the modal if you click on it, but i don't understand how it works behind the scene. I checked the official documentation at: http://getbootstrap.com/javascript/#modals-examples but there's no explaination.
The hiding functionality is implemented in the modal.js in this way.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.
replace data-dismiss="modal" by: onclick="$('#modal_id').modal('hide');"
You should have something like this:
<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">
onclick="$('#modal_id').modal('hide');" will close only the particular modal in which it is placed.
please note if it is this answer is useful.
If u use multiple modals on one page open at the same time on top of each other dismissing the topmost with data-dismiss="modal" will hide all active modals.
exactly in bootstrap.js find the element with attribute data-dismiss="modal" and trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) behind. i.e. it hides the element but in more complex way.
It is roughly equivalent to onclick="$(this).closest('.modal').modal('hide')", i.e. it is searching the DOM upward for .modal (means, the definition of dialog itself) and hides it. The dialog's DOM is not removed.
I triggered the data dismiss with JQuery like so
$('.close').click();
This triggered like if user would of clicked the close button on modal, making data-dismiss hit. You might run in to some issues if there is layers of modals at one, hence will close all.
reference to where I found my solution here
I am trying to create a form inside a modal dialog, it's working if I don't identify a modal size, but if I go to this page: http://getbootstrap.com/javascript/#modals and copy large size modal dialog code, and put my form inside it, the design will be wrong, and the form will be stuck at the top and right borders.
Here's a JS fiddle of the form itself: https://goo.gl/wsnwm8
Thanks.
FORMAT for bootstrap modal
<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">Modal Body</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
Enclose your form inside modal-body
like below
<div class='modal-body'><form ><form></div>
Demo
Put a container class in your modal-content and everything will look just right.
<div class="modal-dialog modal-lg">
<div class="modal-content container">
<!-- form content goes here -->
</div>
</div>
JsFiddle
My original issue:
I know that when this gets coded, the variables get written when the request is sent from the server. So I'll probably have to use JQuery, but I'm lost on where to even start (I don't know JS).
This code works when I refresh the page, but I want it to refresh the data being displayed when the modal is clicked on.
Can anyone point me in the right direction?
My self found fix, for others to view:
Modal Code:
<div class="modal fade ajaxmodal" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" 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">Trace Logging</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
JS:
$('.ajaxmodal').on('show.bs.modal', function () {
$('#modal-body').load('trace.php');
});
trace.php has formatted html that displays on click perfectly.
Updated my original question to contain my answer as well.