https://codepen.io/Maximusssssu/pen/mdPoKZe
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>
<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
<div class="modal-dialog" style="width: 150%;">
<div class="modal-content">
<div class="modal-body">
Minimise this window to see the defect. After minimise, the width is not 100%
</div>
</div>
</div>
<!-- Modal with tab -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Above code works fine. However, when the window is minimized, the width changes (not 100% anymore).
How do i fix the problem? Thank you for your attention.
try max-width: 150%; instead of width: 150%; that is
<div class="modal-dialog" style="max-width: 150%;">
<div class="modal-content">
<div class="modal-body">
Minimise this window to see the defect. After minimise, the width is not 100%
</div>
</div>
</div>
Working demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>
<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
<div class="modal-dialog" style="max-width: 150%;">
<div class="modal-content">
<div class="modal-body">
Minimise this window to see the defect. After minimise, the width is not 100%
</div>
</div>
</div>
<!-- Modal with tab -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I edit this answer ok?
the solution is to add a class with the following code and remove the inline-style
.myModal {
margin-left: 0
}
I just tried it and it works
the problem is that bootstrap adds a margin for those sizes, just set it to 0
remove the style="width: 150%;"
Related
I have a simple question about Bootstrap 4 with simple trick
I want to show a Loading indicator such as Twitter in Every time the user opens the modal.
I make some codes and it works well but I lost some pieces ....
Button HTML Codes :
Click here
Modal HTML Codes
<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Preloader -->
<div id="modal-preloader">
<div class="modal-preloader_status">
<div class="modal-preloader_spinner">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
</div>
<!-- End Preloader -->
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Jquery Codes
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").delay(5000).fadeOut(100);
});
as you can see here it work well but I want the Loading indicator spinner show eveytime when the user close the modal and open it again I think I explain well what I Want... thank you
You can achieve that by defining handler when modal closes. Please run the working code snippet below.
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").delay(5000).fadeOut(100);
});
// reset loading display when modal is closed
$('#example_Modal').on('hidden.bs.modal', function (e) {
$("#modal-preloader").show();
})
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
Click here
<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Preloader -->
<div id="modal-preloader">
<div class="modal-preloader_status">
<div class="modal-preloader_spinner">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
</div>
<!-- End Preloader -->
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
There is also other way to achieve that by simply modifying the shown.bs.modal handle like this:
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").show().delay(5000).fadeOut(100);
});
but it appears glitchy when you re-open the modal. So i recommend using hidden.bs.modal to reset the loading section display inside the modal.
I hope this answers your question.
I have a web app running locally and I will like to get a particular div from this url using jquery without loading the complete page. There is a section which contains a button for opening a modal dialog. I went through some few examples I found here but could not solve my problem. below is the page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/modal.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$.post("https://localhost:44330/",{},function(response){
$(response).find('testblock').each(function(){
$('#main').append($(this).html());
});
});
});
</script>
</head>
<body>
<div class="text-center">
<h1 class="display-4">Hello from sub application 2</h1>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog modal-lg" style="height: 100%; width: 100%">
<!-- Modal content-->
<div class="modal-content" style="height: 90%; width: 100%">
<div class="modal-body" id="main">
#*<iframe src="https://localhost:44330/" width="1200" height="700" style="overflow: hidden; height: 90%; width: 100%; border: 1px solid red;" scrolling="yes"></iframe>*#
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/modalClick.js"></script>
</body>
</html>
And the url has the following structure
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id ="testblock">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal5">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal5" role="dialog">
<div class="modal-dialog modal-lg" style="height: 100%">
<!-- Modal content-->
<div class="modal-content" style="height: 90%">
<div class="modal-body" style="height: 90%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="myBtn5">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried this example but doesn't work
You forgot to add the #. You defined testblock as ID. <div id="testblock"> ...
$(response).find('#testblock') ...
I was able to do this after going through the documentation with a slight adjustment.
<script>
function ready() {
$("#main").load("https://localhost:44330/ #testblock",
function (response)
{
});
}
$(document).ready(ready);
</script>
I have a modal and I want to ask the user to authenticate before showing the modal (that overrides server files with the modal content).
I want the user to click on my editmodal button, to show a connection form and if it's the same as my json base64 encoded data the modal get shown.
My problem: I can't get my modal to be shown with any of those
$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');
my code is :
<button id="buttonmodal" type="button" class="btn btn-primary" data-target="#exampleModal">
(i removed the data-trigger for i want to do it in js)
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style=" width: 600px;
height: 600px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
and my js is pretty simple for now :
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val(text);
$('#exampleModal').modal('show');
});
If ever you have tips or other way to do it, it would help a lot.
You are looking for id "Modal", while your component is using a class "modal" with an id "exampleModal". <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
To fix this you might want to change your code to:
$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');
or
$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');
It all depends on how you would like to be finding your component.
Note: # is used for ids, while . for classes
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button to Open the Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
<button type="button" class="btn btn-primary" id="buttonmodal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 600px; height: 600px;">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val("test 123");
$('#myModal').modal('show');
});
</script>
</body>
</html>
Ok i was dumb, the solution was : my css link where point on bootstrap 4.3 where my script was going on an older version so i had conflict version that wern't shown in the console.
Ty for those who helped
I use bootstrap 3.3.7 in my angular project and the modal is disabled when I open it by clicking "ADD CLASS".
My code is below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>
<div class="add-class pointer" data-toggle="modal" data-target="#add-class-modal">
<img alt="+" src="assets/images/add.png" height="16px" width="16px" style="margin-top: -2px"><span class="add-a-class">ADD CLASS</span>
</div>
<!-- Modal -->
<div class="modal fade" id="add-class-modal" 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-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>
The result looks like this.
"ADD CLASS" button is at the top right corner.
How can I fix it?
Probaby you have some styling which makes that background overlay has larger z-index. Make sure your modal class has correct styling and dont have some additional onces. it should work fine with default bootstrap styling. You can try setting larger z-index to .modal, but the key is to check if you dont have some additional styling applied.
// this is class for dialog itself
.modal {
position: relative;
z-index: 9999
}
If z-index is smaller than 1072 it can be covered by gray background
UPDATE:
Based on bootstrap example modal on bootstrap page, looks like that gray background is created by div with class mocal-backdrop, which by default have such z-index:
.modal-backdrop {
z-index: 1071;
}
I've read the many threads on this topic but none have answered the issue that I'm having. I am trying to create a modal view overlay that spans the page width. However, the modal renders but it isn't responsive. It is darkened out and buttons won't work. This is how I load my assets:
<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>
And this the code I'm running on modal:
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Modal title</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>
<div class="container-fluid">
<%= yield %>
</div>
</body>
</html>
And this is where I want it called from. And I think because I have an animation effect it might be screwing with the event. Note that this is the first thing within the yield:
<div class="container-fluid">
<div class="row"><div class="col-md-12"><h1>Title</h1></div>
<div class="row">
<div class="col-md-3">
<div class="menu-item-1 card effect_hover">
<a class="modal-link" data-toggle="modal" data-target="#basicModal">
<div class="card_front">
<span class="icon-home3 card_text"></span><br>ABOUT
</div>
<div class="card_back">
<span class="card_text">Learn all about our community!</span>
</div>
</a>
</div>
...
So, that's it. I've read the Documentation by Bootstrap and have copied the code into the page but the same issue remains. I've also tried using a local version of bootstrap assets. Thoughts?
I am trying to create a modal view overlay that spans the page width.
Well in that case, you'll have to edit the below line of CSS in the bootstrap.css (not recommended) or in your custom css file.
Here's the line:
#media (min-width: 768px) {
.modal-dialog {
width: 100%; // by default its 600px.
margin: 30px auto;
}
The Bootstrap carousel is built to be responsive, see the screen shots:
On big screens:
.
On smaller screens:
You must be having some content inside the modal which is not responsive or rather with a fixed width.
if you have a look at the styles for the modal, in bootstrap.css, you'll see that:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
The width is set to auto except when the screen-width is 768 or greater, in which case the width is set to.
width:600px;