I am trying to get the Bootstrap 3 date picker to display in a bootstrap modal. I followed the installation instructions and examples but it is not appearing in my modal or anywhere else on the website.
I have installed jquery-3.2.1.min.js, I have a CDN pointing to https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/af.js and I also have the bootstrap-datetimepicker.css installed.
Can anyone help me figure this out please!
<button class="btn btn-primary-outline dropdown-toggle" type="button"
data-toggle="modal" aria-haspopup="true" data-target="#traffic">
TRAFFIC FOR THIS WEEK
</button>
<!-- Start Modal / Edit Schedule -->
<div id="traffic" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div id="calendarfilters">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal / Edit Schedule -->
Related
My system does not show the modal fade when I click on the button I don't know what to do anymore I'm using vuetify , vue js , and axios in the project follow the code section below
<div
ref="modal"
class="modal show"
:class="{show}"
tabindex="-1"
role="dialog"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Criação de Marca</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="criarMarca"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form v-on:submit.prevent="cadastroMarca">
<div class="mb-3">
<label for="formName" class="form-label">Nome</label>
<input class="form-control" type="text" v-model="Marca" id="marca">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary pull-right">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
</div>
I already tried to reinstall the node module, I already changed it for modal-dialog, then when I change it for modal-dialog it appears more static, I would like to know if anyone has had this problem, if so, what is the way to solve it
Elaboration on Question:
I'm using a bootstrap modal dialogue, and I only want it to work if the user is logged in.
While vue.js can make this element disappear entirely if a user is not logged in, or handle links of any kind, 'data-target' is giving me trouble.
Goal: Check if a user is logged in before activating modal. If a user is NOT logged in, I handle it somewhere else in the code (details there are not germane to this question IMO, but involve activating a completely separate modal).
If the user IS logged in, then allow the modal to be activated via 'data-target'
Problem: Currently, when a user is NOT logged in, the 'reportModalIdWithHash' is activated before the
'checkForLogin()'
Code:
<span
class="float-right text-muted smaller-font make-clickable"
data-toggle="modal"
:data-target="reportModalIdWithHash"
v-on:click="checkForLogin()"
>
Report
</span>
Note About Preferred Solution:
I'd like to have "checkForLogin()" to happen before the modal is triggered by "data-target".
While I can always make elements dissappear with Vue.js, I want the user to see the option and then when they click on it, if they're not logged in, then present a login instead of the report modal.
Is it possible to intercept and re-fire 'data-target'?
Why not use a dynamic data-target?
:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"
new Vue({
el: '#app',
data: () => ({
isLoggedIn: false
}),
methods: {
handleLogin() {
// replace this with an async API call...
this.isLoggedIn = true;
// and switch modals...
['fancy', 'login'].forEach(name => $(`#${name}-modal`).modal('toggle'));
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<div id="app" class="container">
<div class="form-check p-3">
<input class="form-check-input" type="checkbox" v-model="isLoggedIn" id="check">
<label class="form-check-label" for="check">
<code>isLoggedIn</code> (click to change)
</label>
</div>
<div class="btn btn-primary" data-toggle="modal"
v-text="`Open Report`"
:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"></div>
<div class="modal fade" tabindex="-1" role="dialog" id="login-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Login modal content goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="handleLogin" data-dismiss="modal" >Login</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="fancy-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Fancy report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Fancy report goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Meh...</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
Note: this is a simple proof of concept, not production ready code:
don't use Vue + Bootstrap + jQuery as in my example (it's pretty barbaric). You're better off using BootstrapVue (and getting rid of jQuery).
You might want to use a single dynamic modal and inject the body, title and footer contents via slots. That's not always better but, in general, leads to DRY-er code at expense of readability.
With BootstrapVue, your button would look more like this:
<b-btn v-b-modal[`${isLoggedIn ? 'fancy' : 'login'}-modal`]> Open Modal</b-btn>
...or, if you want to handle it in a method:
<b-btn #click="handleOpenModal">Open modal</b-btn>
and:
methods: {
handleOpenModal() {
this.$bvModal.open(this.isLoggedIn ? 'fancy-modal' : 'login-modal');
}
}
I've been trying to get a basic modal pop up to show, but not having any luck. With fade on I see the page contents shift to the left, but the modal is invisible. When fade removed I see the modal over the entire screen. I have no idea why its doing what its doing. Hopefully someone here can see what I'm doing wrong.
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome #User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
#*Method 1*#
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
#*End Method 1*#
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" asp-for="TemplateId" asp-items="Model.Templates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" #(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
<span id="templateDesc">#Html.Raw(Model.TemplateDesc)</span>
</div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
I've tried placing the modal code in different areas but the results are the same.
I tried putting everything in jsfiddle for testing, but I have no idea how to use that site.
Try to make a test with code below:
<h1>Test</h1>
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome #User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
#*Method 1*#
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
#*End Method 1*#
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" #(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
#*<span id="templateDesc">#Html.Raw(Model.TemplateDesc)</span>*#
</div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
How does one open a modal from a Bootstrap popover? I'm having trouble with that. My sample code is below. Clicking on the button in the popover does not open the modal. Calling the modal from any other place on the page launches the modal.
I am using the following function for the popover:
$( function() {
$("[data-toggle=popover]").popover( {
html : true,
content : function() {
return $('#popover-content').html();
}
});
});
and here's the relevant HTML for my page:
<li>
<a data-toggle="popover" data-container="body" data-placement="left"
type="button" data-html="true" href="#" id="login">
<i class="zmdi zmdi-account-circle zmdi-hc-lg zmdi-hc-fw"
style="color:white; padding-top:10px;padding-right:32px">
</i>
</a>
</li>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right" style="background-color:#00c853;color:#fff; margin-top:0px" onclick="$('#changeProfileModal').modal()"> </button>
</div>
</div>
</div>
</div>
Thanks in advance for assisting me with this.
You might need to bind the click of the button (which is hidden) via the document.
See sample code below (adjust colours, sizes, etc to your liking)
$(function() {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#button2", function() {
$('#changeProfileModal').modal('show');
});
});
#button2 {
background-color: #00c853;
color: #fff;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul>
<li>
<a data-toggle="popover" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="login">
popover
</a>
</li>
</ul>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right">btn2</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="changeProfileModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
I am using following example
http://www.bootply.com/59864
But when I click on the button which triggers the pop up, background gets darker but window doesn't show. Any idea what's causing this? I am using bootstrap 3.2.0
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CreateWorkbook.aspx.cs" Inherits="CreateWorkbook" %>
<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
<script>
$(function () {
$('#myFormSubmit').click(function (e) {
e.preventDefault();
alert($('#myField').val());
/*
$.post('http://path/to/post',
$('#myForm').serialize(),
function(data, status, xhr){
// do something here with response;
});
*/
});
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="row">
<div class="col-md-12 col-xs-12" style="margin-top: 10px">
<a data-toggle="modal" href="#myModal" role="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-plus-sign">
</span>Add questions</a>
</div>
</div>
<div class="list-group col-md-8" style="margin-top:20px"> Questions list Q1: Name Q2: Location Q3: Outcome Q4: Next meeting date </div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form id="myForm" method="post">
<input type="hidden" value="hello" id="myField">
<button id="myFormSubmit" type="submit">Submit</button>
</form>
</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>
</asp:Content>
The working example is based on Bootstrap 2.3.1, if you are importing Bootstrap 3.3.0, then a working example could be: http://bootply.com/va3EnHE0MJ