bootstrap-modal

Change backdrop to static for open bootstrap modal

由 跟風遠走 提交于 2019-11-28 03:36:17
问题 Can I change backdrop to 'static' while my modal is open? I have modal with form submit button. When I click this button I show loading spinner on my modal and that is the moment when I want to change backdrop to static I tried $('#myModal').modal({backdrop: 'static', keyboard: false}) , but I can still close my modal by clicking the backdrop or using escape button. Second step should be changing backdrop back to true, but I didn't try this yet, because first I need to set backdrop to static.

Bootstrap modal: is not a function

由 巧了我就是萌 提交于 2019-11-27 20:20:31
I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says : $(...).modal is not a function This is my Modal HTML : <div class="modal fade" id="prizePopup" 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"> This Modal title </h4> </div> <div class="modal-body"> Add some text here </div> <div class=

Bootstrap modal opening on page load [duplicate]

由 試著忘記壹切 提交于 2019-11-27 18:07:39
问题 This question already has an answer here: Launch Bootstrap Modal on page load 18 answers I got a page with a bootstrap modal on it (manual: http://getbootstrap.com/javascript/#modals). I would like to have this modal open on page load. However this is not happening. <!-- Modal --> <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button

Handle Bootstrap modal hide event in Vue JS

由 橙三吉。 提交于 2019-11-27 18:06:48
问题 Is there a decent way in Vue (2) to handle a Bootstrap (3) modal hide-event? I found this as a JQuery way but I can't figure out how to capture this event in Vue: $('#myModal').on('hidden.bs.modal', function () { // do something… }) Adding something like v-on:hide.bs.modal="alert('hide') doesn't seem to work. 回答1: Bootstrap uses JQuery to trigger the custom event hidden.bs.modal so it is not easily caught by Vue (which I believe uses native events under the hood). Since you have to have

Confirm deletion using Bootstrap 3 modal box

由 泪湿孤枕 提交于 2019-11-27 17:12:38
I need to confirm deletion using Bootstrap 3 modal box (YES/NO). How can I create this? HTML code: <form action="blah" method="POST"> <button class='btn' type="submit" name="remove_levels" value="delete"> <span class="fa fa-times"></span> Delete </button> </form> Nigel Angel You need the modal in your HTML. When the delete button is clicked it popup the modal. It's also important to prevent the click of that button from submitting the form. When the confirmation is clicked the form will submit. $('button[name="remove_levels"]').on('click', function(e) { var $form = $(this).closest('form'); e

Toggle Bootstrap modal with URL and hash

由 假如想象 提交于 2019-11-27 16:41:40
问题 I'd like to use URLs with hashes to call specific Bootstrap modals. In other words, a user is on page1 and clicks on a link to page2#hash and the #hash modal loads when page2 loads. I've tried so many variations based on what I've read in other Q/As, but nothing has worked. I'm not at all experienced with JS, so I'd appreciate some help! Here's what I have: Link on page1: <a href="/page2#myModal> HTML on page2: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true

Close bootstrap modal without using “hide” and “data-dismiss”

由 烂漫一生 提交于 2019-11-27 13:53:15
问题 I want to close bootstrap modal box conditionally. If I use $('#modal').modal('hide'); this, some thing goes wrong with my code. And If I use data-dismiss="modal" in the HTML template, modal dismiss action performs before my actual functionality should be perform on button click. So, there is any other way to close bootstrap modal or any idea to use data-dismiss="modal" at run time? 回答1: You can do it with auto modal closing behavior which uses the data-dismiss attribute itself or with the

Set textarea width to 100% in bootstrap modal

由 对着背影说爱祢 提交于 2019-11-27 13:24:24
Was trying all possible ways, but never succeeded: <div style="float: right"> <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button> </div> <!-- Modal --> <div class="modal fade" id="declineModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id=

Autocomplete issue into bootstrap modal

由 亡梦爱人 提交于 2019-11-27 12:16:23
I have a display problem in the jQuery autocomplete inside a modal dialog bootstrap. When I mouse scroll, the results do not remain attached to the input. Is there a way to solve this? Here JsFiddle : .ui-autocomplete-input { border: none; font-size: 14px; width: 300px; height: 24px; margin-bottom: 5px; padding-top: 2px; border: 1px solid #DDD !important; padding-top: 0px !important; z-index: 1511; position: relative; } EDIT I found the problem: .ui-autocomplete { position: fixed; ..... } If the modal has scroll the issue remains! Here JsFiddle/1 . The position is right that it is "absolute",

Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

由 a 夏天 提交于 2019-11-27 12:03:38
It's so simple in a non-Angular environment. Just html and a two line of js code to show a modal confirmation dialog on the screen. Now I am developting an AngularJS project in which I am using ui-bootstrap modal confirmation dialogs all over the place and I am sick of creating new controllers even for simple things like "Are you sure to delete this record?" kind of stuff. How do you handle these simple situations? I am sure some people wrote some directives to simplify the needs. I am asking you to share your experiences or the projects you know about that subject. harishr so create a
订阅 bootstrap-modal