I have a doubt that I can't solve. From a PHP page I call a typical modal window in which I always had a button that updated or added or deleted records, but now I need to place 2 buttons and that the new button allows me to call a PHP page in which I have a code that downloads data and passes it to an Excel file. I don't know how to make the call to that page from the button in the modal window.
<div class="mb-3 row">
<div class="col-md-6 text-center">
<button type="submit" class="btn btn-primary">update</button>
</div>
<div class="col-md-6 text-center">
<button type="button" class="btn btn-success">download detail</button>
</div>
</div>
I would appreciate any help. Thanks
In Bootstrap, you can use same button classes for <a> tag as well:
The .btn classes are designed to be used with the <button> element.
However, you can also use these classes on <a> or <input> elements
(though some browsers may apply a slightly different rendering).
So your button should be done like this:
download detail
I want to implement a carousel using the excellent Slick Slider(https://kenwheeler.github.io/slick/) which I have used for images before with no problems. I'm trying to create a 'center mode' slideshow like the example except using several div;
I want to do something like this;
These are the div's I want to use on codepen here - https://codepen.io/grabthereef/pen/mdymmgM
<!-- Single Card -->
<div class="single_slide">
<div class="row">
<div class="col-lg-4">
<div class="top-text">
<h1>DG Aurum</h1>
</div>
<div class="view-button">
<button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
</div>
</div>
<div class="col-lg-8 text-center">
<img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
</div>
</div>
</div>
The problem is when I add the Slick Slider code it messes the layout of the page;
https://codepen.io/grabthereef/pen/gObWBVG
I've tried looking through the other questions on here but I can't find a solution that works for me, I'm fairly new to JS.
If you go ahead and load the slick slider css file, that should pretty much fix the problem for you //cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css. I found this out only after making a very barebones version of the slick slider on my own codepen https://codepen.io/dthenley/pen/PowJbgN and proceeding from there. My slider was doing pretty much the same thing yours was right until I added the css code. I also loaded it with a document ready function
$(document).ready(function(){
$('.your-class').slick();
});
I used the tab feature in Bootstrap in a different way for a high-fidelity prototype. Using it to go from one section to another but not using the tabs so the first page shows, then you just use an anchor to go from section to section. The problem I have come up with is that I need to go from one page to a specific section "tab" within another. I can't figure out how to do this. I am not great with javascript so any help would be greatly appreciated.
Page 1 - Home.cshtml
<a class="btn btn-primary" href="AlignTeam#stepAlign2" data-target="#stepAlign2">Next</a>
Page 2 - AlignTeam.cshtml
<div class="page-body myWizard">
<div class="tab-content">
<!-- STEP ONE -->
<div class="tab-pane fade in active" id="stepAlign1">
Content
</div>
<!-- STEP TWO -->
<div class="tab-pane fade" id="stepAlign2">
Content
</div>
<!-- STEP THREE -->
<div class="tab-pane fade" id="stepAlign3">
Content
</div>
</div>
You might be forgot to include .html (file extension) on AlignTeam
which is href="AlignTeam#stepAlign2". It has to be href="AlignTeam.html#stepAlign2".
You need a bit of knowledge on Javascript & JQuery to be able to achieve that.
I have provided you the solution on Plunker. You could learn more from it because you can preview it's result as well.
Let me know later if you find this helpful. Cheers !
I'm facing an issue with my collapsible, that make the collapsible-body to open/close several times very fast when I click on a collapsible-header element.
Here is the modal trigger:
<a class="btn modal-trigger" href="#myModal">Trigger</a>
Here is my modal structure: (note the use of ng-repeat, not sure if it might be linked)
<div id="myModal" class="modal">
<div class="modal-content" >
<ul class="collapsible" data-collapsible='accordion' watch>
<li>
<div class="collapsible-header">FOO</div>
<div class="collapsible-body">foo</div>
</li>
<li>
<div class="collapsible-header">BAR</div>
<div class="collapsible-body">bar</div>
</li>
</ul>
</div>
</div>
The script ending my HTML:
<script>
$(document).ready(function(){
$('.modal-trigger').leanModal({
ready: function(){
$('.collapsible').collapsible()
}
});
});
</script>
I've been browsing around without finding any related issue. Any help will be much appreciated (do not hesitate to ask for clarification).
Thanks Allan for your answer, Although it is not related to the height:
The modal automatically vertical-expands itselfs when item is opening.
Setting a large min-height doesn't solve my issue.
I am trying to get a simple bootstrap's modal sample to work, I follow this document which says " You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, ...", but I have done whatever I could and had a huge amount of research still can not get this simple modal to work.
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
I have either this:
<a class="btn" data-controls-modal="myModal">Launch Modal</a>
or this:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
button to activate the modal, I have loaded the bootstrap-modal.js on the page as well. Unless I added a javascript line to handle the "Launch Modal" click event, when I click on "Launch Modal", nothing happens at all, are there anything that I have missed?
I finally found this solution from "Sven" and solved the problem. what I did was I included "bootstrap.min.js" with:
<script src="bootstrap.min.js"/>
instead of:
<script src="bootstrap.min.js"></script>
and it fixed the problem which looked really odd. can anyone explain why?
Fiddle 1: a replica of the modal used on the twitter bootstrap site.
(This is the modal that doesn't display by default, but that launches when
you click on the demo button.)
http://jsfiddle.net/9RcDN/
Fiddle 2: a replica of the modal described in the bootstrap documentation,
but that incorporates the necessary elements to avoid the use of any javascript.
Note especially the inclusion of the hide class on #myModal div, and the use of data-dismiss="modal" on the Close button.
http://jsfiddle.net/aPDVM/4/
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close<!-- note the use of "data-dismiss" -->
Save changes
</div>
</div>
It's also worth noting that the site you are using is running on bootstrap 2.0,
while the official twitter bootstrap site is on 2.0.3.
Also have a look at BootBox, it's really simple to show alerts and confirm boxes in a bootstrap modal. http://bootboxjs.com/
The implementation is as easy as this:
Normal alert:
bootbox.alert("Hello world!");
Confirm:
bootbox.confirm("Are you sure?", function(result) {
Example.show("Confirm result: "+result);
});
Promt:
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
And even custom:
bootbox.dialog("I am a custom dialog", [{
"label" : "Success!",
"class" : "btn-success",
"callback": function() {
Example.show("great success");
}
}, {
"label" : "Danger!",
"class" : "btn-danger",
"callback": function() {
Example.show("uh oh, look out!");
}
}, {
"label" : "Click ME!",
"class" : "btn-primary",
"callback": function() {
Example.show("Primary button");
}
}, {
"label" : "Just a button..."
}]);
I had an issue with Modals as well. I should have declare jquery.min.js before bootstrap.min.js (in my layout page).
From official site : "all plugins depend on jQuery (this means jQuery must be included before the plugin files)"
I run into this issue too. I was including bootstrap.js AND bootstrap-modal.js.
If you already have bootstrap.js, you don't need to include popover.
For me the bootstrap modal was showing and disappearing when I clicked the button tag (in the markup the modal is shown and hidden using data attributes alone). In my gulpfile.js I added the bootstrap.js (which had the modal logic) and the modal.js file. So I think after the browser parses and executes both the files, two click event handlers are attached to the particular dom element (one for each of the files), so one shows the modal the other hides the modal. Hope this helps someone.
Try skipping the p tag or replace it with a h3 tag or similar. Replace:
<p>One fine body…</p>
with
<h3>One fine body…</h3>
It worked for me, I don't know why, but it seems the p tag is somehow not fully compatible with some versions of Bootstrap.
A better solution is to load a twisted version of bootstrap.js without jquery. Get it from http://daniemon.com/blog/bootstrap-without-jquery/
<script src=".../bootstrap-without-jquery.min.js"></script>
Going this way will save you trouble from script tags.
Also,
If you're running your page from Visual Studio and have installed the bootstrap package you need to make sure of two things
That you've also gotten the Bootsrap Modal Dialog package (very important)
You've added it to bundle.config if you're using bundling.
I was having this same problem using Angular CLI. I needed to import the bootstrap.js.min file in the .angular-cli.json file:
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"],
A simple way to use modals is with eModal!
Ex from github:
Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
use eModal to display a modal for alert, ajax, prompt or confirm
// Display an alert modal with default title (Attention)
eModal.alert('You shall not pass!');
You must call your Bootstrap jQuery plugin so that it will trigger.
<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
<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>
</div>
<div class="modal-body">
<div class="col-lg-6" >
<p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
<p class="price-para">
<span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
<span class="price-cls" ng-bind="cartModal.product.p_price"></span>
</p>
<p class="select-color">
<span ng-repeat="color in cartModal.product.p_available_options.colors">
<button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
</span>
</p>
<br>
<p class="select-box">
<span class="size-select-cls">
SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
item.name for item in items"></select>
</span>
<span class="qty">
QTY:<input type="number" min="1" ng-model="cartModal.selectedQty"/>
</span>
</p>
<p class="edit-button">
<button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
</p>
</div>
<div class="col-lg-6">
<img ng-src="{{cartModal.product.imageSrc}}">
</div>
</div>
</div>
</div>
</div>