So I have the following html:
<div class="btn-group pull-right">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Export Features <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>CSV
</li>
<li>Excel
</li>
</ul>
</div>
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Currently downloading: <small>feature-set-II.csv</small></h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
60%
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" disbaled>Begin Download</button>
</div>
</div>
</div>
</div>
And when ever I click on CSV in the button drop down - what happens is it refreshes the page and the modal never opens, I believe its because of the href="#" part, but I am not sure, This shouldn't require any JS at all...
Your example does work correctly. Try it in this Bootply.
The Modal feature from Bootstrap requires the bootstrap.js library or at least the modal.js part of this library. You don't need to write any Javascript but you do need to include the Javascript library.
Your code should works fine:
Bootply Demo
Some things to note:
You need to include jQuery since Bootstrap js require jQuery to works.
You need to include Bootstrap CSS and JS files.
Include Bootstrap JS after you've included jQuery properly.
Your call to the modal should match IDs. Use something like this:
<a data-toggle="modal" href="#myModal">CSV</a>
Your first div for you modal should be something like this
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
That should fix it
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've got two Bootstrap 3 modals as below. One modal is switching to another - and there is a button - "Go back" to previous modal. Unfortunatelly modals are long and when I'm switching back - scrolling works but for website, not for previous modal. Anyone knows how to fix it?
I'm using the default bootstrap css and js files, google chrome
Complete HTML code as below:
<head>
<!-- scripts: jquery.min.js; bootstrap.min.js css: bootstrap.min.css -->
</head>
<body>
<button type="button" data-toggle="modal" data-target="#addOffer">Add offer</button>
<button type="button" data-toggle="modal" data-target="#viewOffer">View offer</button>
first modal:
<div class="modal fade" tabindex="-1" id="viewOffer" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">View offer</h4>
</div>
<div class="modal-body">
lots of text about offer here:
<button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
second modal:
<div class="modal fade" id="addOffer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add offer</h4>
</div>
<div class="modal-body">
lots of forms for new offer here:
<input id= "see_offer" name="see_offer" type="submit" class="btn btn-info" value="View offer" data-dismiss="modal" data-toggle="modal" data-target="#viewOffer" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add .modal { overflow-y:auto; } to your css file.
The regular data-toggle:"modal" button will do, as suggested, toggle the modal visibility. The buttons in your page may remain so. However, you seem to want your modal buttons to hide one modal and show another, so set a function to them manually like so:
$("[hide-modal]").click(function () {
$(this).attr("hide-modal").modal("hide");
$(this).attr("display-modal").modal("show");
});
Then in your modal buttons:
<button type="button" class="btn btn-info" hide-modal="#viewOffer" display-modal="#addOffer">Go back</button>
<button type="button" class="btn btn-info" hide-modal="#addOffer" display-modal="#viewOffer">View offer</button>
I have 2 buttons next to each other. The first opens a modal with the data-target of #myModal and the second button opens it with the data-taget of #largeModalTwo. The problem is, the first works fine but clicking the 2nd button only dims the screen, it doesn't open any modal.
this is bootstrap 4, could this be a bug with it?
here is the codepen
<div id="fullWidthContButtons">
<div class="container-fluid centerthisouter" style="margin-top: 25px;">
<div class="page-header centerthisinner centerthisouter">
<button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#myModal">
<h3 class="title">test data</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button>
</div>
</div>
<div class="container-fluid centerthisouter" style="margin-top: 25px;">
<div class="page-header centerthisinner centerthisouter">
<button type="button" class="btn btn-primary modalLaunch" data-toggle="modal" data-target="#largeModalTwo">
<h3 class="title">test data 2</h3> <i class="fa fa-external-link open-seseme" aria-hidden="true"></i> </button>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">Load JSON</h4> </div>
<div class="modal-body centerthisouter">
<button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">Load JSON file to create table</button>
<table class="table table-striped" id="data_table" /> </div>
</div>
</div>
</div>
<div id="largeModalTwo" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> ... </div>
</div>
</div>
No bug in Bootstrap just a super minor error in your HTML. <table> properties are not self-closing in HTML, as you have in your first modal example. I think this was throwing off the modal JS from bootstrap because the element wasn't ever closed.
A minor code change in the modal body and you are good to go:
<div class="modal-body centerthisouter">
<button type="button" class="btn btn-primary centerthisinner sm-margin" id="loadJson">
Load JSON file to create table
</button>
<table class="table table-striped" id="data_table"></table>
</div>
Revised codepen:
http://codepen.io/staypuftman/pen/wzNVxP
A bootstrap modal in one of my sites is working perfect when i view it localy (the PDF is loading fine) but online although the modal is working the PDF is not diplayed.
Any ideas?
Thank you
<button type="button" class="btn btn-lg btn-outline" data-toggle="modal" data-target="#myModal">
<i class="fa fa-download"></i>Launch my CV
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/cv.pdf" data-backdrop="static" data-keyboard="false">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
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