In My case the whole modal was style to "opacity: 0" . That's why I was facing this problem. Check on your Css if there is any opacity: 0 or display: none or something that makes the modal invisible.
Answer from Arijit Bag on Stack Overflow Top answer 1 of 2
1
In My case the whole modal was style to "opacity: 0" . That's why I was facing this problem. Check on your Css if there is any opacity: 0 or display: none or something that makes the modal invisible.
2 of 2
0
Its working fine for me..
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary backcolor"><i class="fa fa-angle-right"></i> <span>View Profile</span></button>
<!-- Modal -->
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
</div>Bootstrap Studio Forum
forum.bootstrapstudio.io › bug reports
Modal not showing 5.7 - Bug Reports - Bootstrap Studio Forum
June 20, 2021 - modal not showing after update 5.7 but no problem on 4.6
Top answer 1 of 16
93
I tracked down the reason.
Just to give it some general usefulness to anyone coming to this question. If you can't figure out what's wrong, try doing a 'search all' for any classes of 'modal' 'fade' 'fade in' and 'hide' in any style sheets in your application.
I had a single instance of 'fade' being defined in a random css file, and that's what was stopping it displaying as it was overriding bootstrap. Once I deleted the reference, everything was ok.
2 of 16
65
I had the same problem. For me the cause was the use of Bootstrap 5 with outdated data-toogle and data-target attributes in the launch button:
After the correction of
Copy<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >
to
Copy<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal">
it ran correctly.
Reddit
reddit.com › r/css › [bootstrap]modal not showing
r/css on Reddit: [Bootstrap]Modal not showing
January 6, 2016 -
I feel like this should be rather simple, but I can't figure it out and it's starting to drive me crazy.
I am using Bootstrap (on the Java Play framework if that matters) and trying to make a simple modal. I copied a tutorial I found online, but for some reason the modal just won't show.
Here is the portion of code in question:
<body>
<div id="Header">
<div class="row text-right">
<a id="login-button" data-toggle="modal" data-target="#loginModal" type="button">Login</a>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<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">Small Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
</div>
@content
</body>Can anyone see what might be causing it to fail?
Edit: So I was looking at the CSS and for some reason the Bootstrap .modal class has display:none and .fade has opacity defaulted to 0. I can mess around in the browser tools and change that, but i'm not sure how to fix it permanently.
MDBootstrap
mdbootstrap.com › standard › material design for bootstrap 5 & vanilla javascript
Modal is not showing (only backdrop is showing) - Material Design for Bootstrap
Expected behavior modal.show() opens modal Actual behavior modal.show() set only backdrop and no modal added Resources (screenshots, code snippets etc.) I am show
Mobirise Forums
forums.mobirise.com › discussion › 16117 › bootstrap-modal-doesnt-show-up-something-must-be-wrong
Bootstrap modal doesn't show up... Something must be wrong. - Mobirise Forums
<?php /* * PHP-Webseitenschutz - geheim.php * - werner-zenk.de */ // Dieses Script muss an den Anfang jeder Seite die geschützt werden soll. session_start(); if (!isset($_SESSION["benutzername"])) { header("Location: ../anmeldung.php"); // Zur Anmeldung weiterleiten, bitte Pfad anpassen exit; } ?> Do not forget so set your page name extension to .php ... @Tommy, Thanks for the tutorials. I am having trouble understanding how mobirise and interact with bootstrap and how they can be integrated. Fundamentally this is the reason for my previous question about the "sign-in modal". Since, I used the code from bootstrap site in the Mobirise builder but with no good results.
Flexmonster
flexmonster.com › home › question › issue :when i go fullscreen the popup modal is not visible on the main screen
Issue :when I go fullscreen the popup modal is not visible on the main screen • Flexmonster
customizeToolbar(toolbar: Flexmonster.Toolbar) { var tabs = toolbar.getTabs(); toolbar.getTabs = function () { tabs.unshift({ id: "open-custom-popup", title: "Pop-Up", icon: tabs[1].icon, handler: openPopup }); tabs[tabs.length - 1].handler = toggleFullscreen; return tabs; }; function toggleFullscreen() { if (document.fullscreenElement) document.exitFullscreen(); else document.getElementById("wrapper").requestFullscreen(); }; function openPopup() { document.getElementById("custom-popup").style.display = "block"; } } Please let us know if it works for you. Do not hesitate to contact us in case additional questions arise.
GitHub
github.com › shlomiassaf › ngx-modialog › issues › 280
Modal not showing when used with Bootstrap V4 · Issue #280 · shlomiassaf/ngx-modialog
January 11, 2017 - The reason was a breaking change in Bootstrap 4.0.0-alpha.6. In earlier Versions, class="fade in" on the modal caused it to a) be hidden and b) smoothly appear. It seems that the "in" class has now been renamed to "show".
Author nielsboecker
Top answer 1 of 2
2
Ok so all you needed to do is add jquery to your javascript libraries as you can see below is working code just copy and paste the whole thing. In the head of your document there is a script tag with a link to bootstraps js file and above it is a link to jquerys js file. Bootstrap runs off of jquery so it will not work without it. With bootstrap you always need to load jquerys js file before bootstraps js file
<html>
<head>
<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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>
</div>
</body>
</html>
2 of 2
0
I think, you have two problems :
First one, as @Cory said, I think you ' ld be placed your custom javascript in the bottom of your page
Second one, you didn't include jquery (and don't forget to insert it before the bootstrap one)
I did a fiddle here and I add your <input id="myInput" /> into your modal and it seems to work pretty well : https://jsfiddle.net/9hxo6x88/
Hope it's help
Team Treehouse
teamtreehouse.com › community › modal-not-displaying-although-i-followed-the-video-exactly
Modal not displaying although I followed the video exactly (Example) | Treehouse Community
December 31, 2022 - I was having the same issue, but was able to resolve it by updating the CSS and JS cdn links used in the workspace to the current Bootstrap version, here: https://getbootstrap.com/docs/5.3/getting-started/download/ The attributes in the version used in the video are missing "bs-". ... <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#register">Register Now</button>
Top answer 1 of 16
62
Most common reason for such problems are
1.If you have defined the jquery library more than once.
Copy<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost(Modal function is in bootstrap).
2.Please wrap your JavaScript code inside
Copy$(document).ready(function(){});
3.Please check if the id of the modal is same
as the one you have defined for the component(Also check for duplication's of same id ).
2 of 16
33
Copy<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
Note: Remove fade class from the div and enjoy it should be worked
Note 2: If removing the fade class seems to work for you. This probably means that you have a version mismatch between your Bootstrap js and CSS.
You might be using a slightly newer version of Bootstrap js with a slightly older version of Bootstrap CSS. It can be easy to forget to upgrade the Bootstrap css when upgrading the Bootstrap js.
Updating the Bootstrap CSS to match the Bootstrap js should fix this issue.
Stack Overflow
stackoverflow.com › questions › 47757588 › bootstrap-modal-not-displayed-but-seems-to-be-opened
jquery - Bootstrap modal not displayed but seems to be opened - Stack Overflow
It appears that your modal is getting a class of .show added to it when you should be adding a class of .in. Copying the bootstrap examples isn't the best as they tend to be stripped back versions... they assume you copied the default example at the top of the section.
Stack Exchange
salesforce.stackexchange.com › questions › 227134 › how-to-programmatically-identify-that-no-modal-is-visible-on-screen
lightning aura components - How to programmatically identify that no modal is visible on screen? - Salesforce Stack Exchange
if(!$('#myModal').is(':visible')){ //If no modal is visible on screen document.body.setAttribute('style', ''); //Remove the style to hide scrollbar } Please note that I want to identify presence of modal in DOM and not in the component where it is rendered.
Top answer 1 of 2
2
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name: </label>
<input type="text" id="wlanName" size="15">
<label>Passphrase: </label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>You forgot to mention </div>
hope this works.
2 of 2
1
You had missing closing tags for your modal divs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-default" data-toggle="modal" data-target="#settings">
<img src="img/settings.png" alt="" class="img-circle">
</button>
<button class="btn btn-default" data-toggle="modal" data-target="#help">
<img src="img/help.png" alt="" class="img-circle">
</button>
<div id="settings" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4> Tethering</h4>
<label>Name:</label>
<input type="text" id="wlanName" size="15">
<label>Passphrase:</label>
<input type="text" id="passPhrase" size="15">
<br>
<br>
<button type="button" class="btn btn-success" onclick="enableTethering()">Enable tethering</button>
<button type="button" class="btn btn-danger" onclick="disableTethering()">Disable tethering</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="help" class="modal fade" role="dialog">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Help</h3>
</div>
<div class="modal-body">
*CONTENT TO BE MADE*
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Bootstrap
getbootstrap.com › docs › 4.0 › components › modal
Modal · Bootstrap
Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. Below is a live demo followed by example HTML and JavaScript. For more information, read the modal events docs for details on relatedTarget. Open modal for @mdo Open modal for @fat Open modal for @getbootstrap
GitHub
github.com › twbs › bootstrap › issues › 3902
modal('show') after a modal('hide') doesn't work · Issue #3902 · twbs/bootstrap
June 21, 2012 - opened · on Jun 21, 2012 · Issue body actions · immediately after hiding a modal, if a show call is issued it doesn't work e.g. $('#show_modal').click(function(){ $('#test-modal').modal('show') $('#test-modal').modal('hide') $('#test-modal').modal('show') }) Looks like end effect should be a modal dialog shown, but instead modal is hidden with a black screen see it in action here http://jsfiddle.net/anuraguniyal/qzAmP/ For time being I am working around it by issuing a setTimeout of 1000 msec, because looks like bootstrap takes 500 msec to hide modal in a timeout ·
Author anuraguniyal
Stack Overflow
stackoverflow.com › questions › 55972625 › why-is-bootstrap-modal-form-opening-but-not-visible
jquery - Why is bootstrap-modal form opening but not visible? - Stack Overflow
$("body").on("click", ".customer-records", function(e) { var ui = $("#AddCustomerRecordUI") $.post("NewRecordBuilder", { id: "123" }, function(html) { ui.find(".AddCustomerRecordData").html(html); ui.modal("show"); }) }); It appears the form opens but is invisible.
Team Treehouse
teamtreehouse.com › community › modal-window-appear-but-doesnt-work
Modal window appear but doesnt work (Example) | Treehouse Community
September 2, 2014 - The only tricks I've found for now is to use the data-backdrop="false" inside of the Button. And then use this CSS to create a backdrop effect. The problem is now that if I click outside of the form, the form no longer close due to the ...
Developer Community
developercommunity.visualstudio.com › content › problem › 766650 › modal-dialog-not-shown-off-screen.html
Modal dialog not shown (off-screen?)
Skip to main content · Microsoft · Visual Studio
BootstrapVue
bootstrap-vue.org › docs › components › modal
Modal | Components | BootstrapVue
A component reference (which is mounted on a focusable element, such as <b-button>) ... If the passed in element is not focusable, then the browser will determine what has focus (usually <body>, which is not desirable) This method for returning focus is handy when you use the <b-modal> methods show() and hide(), or the v-model prop. Note this property takes precedence over other methods of specifying the return focus element. When <b-modal> is opened via the v-b-modal directive on an element, focus will be returned to this element automatically when <b-modal> closes, unless an element has been specified via the return-focus prop.