This question already has answers here:
Change the background color in a twitter bootstrap modal?
(12 answers)
Closed 2 years ago.
Hello I'm using bootstrap 3 for my modal
I want to change the background color of my modal
Here's the html code
<div class="modal fade modal-white" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter code to access form</h5>
{{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button> --}}
</div>
<div class="modal-body">
<div class="alert alert-danger" id="alertThis" role="alert" style="display:none;">
Invalid code please try again ..
</div>
<input name="clients" class="clients form-control" type="password" id="inputCode" placeholder="Code">
</div>
<div class="modal-footer" style="border:none!important;">
<button type="button" onClick="proceedCode();" id="proceedCode" class="btn btn-primary">Enter</button>
<a class="btn btn-secondary" href="{{url('/')}}">Cancel</a>
</div>
</div>
</div>
</div>
and sample output
I want to make the background color to all black and only the modal can be seen only. Is there class that I need to add, trying to tweak it using modal-backdrop and modal-white class but its not working.
Try this in your css file
.className {
background-color: black !important;
}
Try this, hope it's helpful.
#exampleModal {
background-color: black;
}
Related
For school, I have to make my own website that shows some basic things to first years. So I got the idea, that I make a modal with Bootstrap. If you press the card, the modal will pop up.
Now, I want in the middle where 'CODE WHERE' is, to show the code for something. For example: let me just print or . But it won't let me, it will convert into HTML all the time and I don't want to convert it. I've looked a lot of pages, but I don't seem to find how. Anyone a solution?
Thank you very much.
<!-- Button trigger modal -->
<div style="cursor: pointer;" class="col-md-12" data-toggle="modal" data-target="#exampleModal">
<div class="card mb-4 shadow-sm">
<div class="card-body">
Text
</div>
</div>
</a>
</div>
<!-- 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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Code</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<pre>
<code>
CODE HERE??
</code>
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
First way is replacing < by < and > by > inside Your <code></code>.
Second way is make it change automatically in javascript:
var codeTags = document.querySelectorAll('code');
for (var i = 0; i < codeTags.length; i++) {
codeTags[i].innerText = codeTags[i].innerHTML;
}
Or easier in jQuery:
$('code').each(function(){
$(this).text($(this).html());
});
I have modal box like this:
<!-- Modal FOR PLAYERS-->
<div class="modal fade" id="Info" 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>
<h3 class="modal-title" id="myModalLabel">Player profile for</h3>
</div>
<div class="modal-body info-player">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<label>GOALK IN THIS SEASON :</label> 11
</div>
</div>
</div>
</div>
</div>
</div>
And i have added a Span Element where users can click on it to get the relevant data:
<span class="playerInfo" data-toggle="modal" data-target="#Info">Info</span>
but now i wan to have some "data-XYZ='VALUE'" attributes in my SPAN Element and I want to parse to my modal box, how could I do someting like this?
I only know the way with an jquery onclick handler, but i think is also another better way or what you think?
Thanks for your help or any hints...
thanks
You can make use of the bootstrap shown.bs.modal event
Occurs when the modal is fully shown (after CSS transitions have completed)
$('#Info').on('shown.bs.modal', function() {
$(".playerInfo").data("xyz"); //value
// use the above data however you want
})
HTML:
<span class="playerInfo" data-xyz="value" data-toggle="modal" data-target="#Info">Info</span>
I am trying to create a html modal window in zk. But the hide functionality hides also the window as shown i the image
Code snippet:
<tabpanel id="borgerdkRequestPanel2">
<div>
<html xmlns="native" xmlns:u="zul"
xmlns:zk="zk">
<a data-target="#myModal1" role="button"
class="btn" data-toggle="modal">
Launch demo modal
</a>
<div id="myModal1" class="modal hide "
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="false">
×
</button>
<h3 id="myModalLabel1">
Modal header
</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn"
data-dismiss="modal" aria-hidden="true">
Close
</button>
<button class="btn btn-primary">
Save changes
</button>
</div>
</div>
</html>
</div>
</tabpanel>
It seems to be some kind of zk problem, as the code runs fine in html. CSS is bootstrap. And ZK framework is 7.0.3.
remove hide class from your modal. If you want some animation add instead fade class to your modal.
The result should be this:
<div id="myModal1" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
Tested on ZK 7.0.4
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="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">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>
I all,
I am using modals on my website and the scroll area containing them do not fit the page.
See on the screenshot.
I am not applying any additional style to the modals and I can't figure out where does the problem come from.
I am sorry it is hard to post code because I am not sure which part might cause this and the code base is relatively large..
EDIT: Sample modal
<div class="modal fade" id="addSpotModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" onclick='addSpot.cancel()'
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add a spot</h4>
</div>
<div class="modal-body">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick='addSpot.cancel()'>Close</button>
<button type="button" class="btn btn-primary" onclick='addSpot.sendAddSpotRequest()'>Save changes</button>
</div>
</div>
</div>
Any idea?
Thanks. Olivier
Firstly, the scroll is based on the modal itself, so as you can see, the rounded corners are not visible. The content inside the modal is pushing the size to be larger than the viewing area. You could try the size utilities like modal-lg on the dialog (<div class="modal-dialog modal-lg">) if you haven't done so. You can also change the dimensions through LESS/variables. The #modal-lg, #modal-md, and #modal-sm. To decrease the top margin, you would need to adjust the CSS for modal-dialog as 30px is the default.