I use the fullcalendar.js with Bootstrap 4 modal.
I have bootstrap4 button when I click on it a modal show up with fullcalendar component.
But when It loads for the first time I get this:
But when I click on the button the next/prev button it works fine
So how I can fix that.
HTML code
<body>
<div id="content">
<button id="btn-calendar" type="button" class="btn btn-dark" data-toggle="modal" data-target="#modal-calendar"><i class="fas fa-calendar-alt"></i></button>
<div class="modal fade" id="modal-calendar" tabindex="-1" role="dialog" aria-labelledby="modal-calendar-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-calendar-title">Calendar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="calendar"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- script tags -->
</body>
CSS code:
* {
margin: 0;
padding: 0;
}
html,
body,
#content {
width: 100%;
height: 100%;
}
#btn-calendar {
margin: 10px;
}
It works if I create the object after the modal is open for the first time.
//app.js
$(function() {
var render = () => {
console.log('render after modal is open');
$('#calendar').fullCalendar({
// setup
})
$('.modal').unbind('shown.bs.modal', render)
}
$('.modal').on('shown.bs.modal', render)
})
Related
From Bootstrap website, it always use button to show the modal.
I am using React, so I want to use javascript manipulate whether the modal shows.
Is there any way to make the modal show as default?
Modal.js
...
return(
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
)
import "./styles.css";
import Modal from './Model'
export default function App() {
return (
<div className="App">
<h1>123</h1>
<Modal/>
</div>
);
}
you can use jquery to show or hide
$("#id of your modal").modal("show");
$("#id of your modal").modal("hide");
jQuery must be referenced first . before the bootstrap
if you wanna use pure javascript only you can change it manually like bellow:
<!-- Modal -->
<div id="mymodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" id="close-btn" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button id="close-btn" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
// select close buttons
const mymodal = document.getElementById('mymodal');
const close_btn = document.querySelectorAll("#close-btn");
//show the modal
mymodal.style.display = "block"
//close modal function
function hide() {
mymodal.style.display = "none"
}
//clise the modal when you click the close btns
close_btn.forEach(close => {
close.addEventListener("click", hide)
})
</script>
and change the script in order you want
// I found it in jquery but i want it in javascript is there any alternative code. Please help, thanks
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
I believe bootstrap toggles a class on the modal (haven't looked it up recently.
The plain JS equivalent would be
window.addEventListener('load', () => {
const modal = document.querySelector('#myModal');
if (modal) {
modal.classList.add('show');
modal.style.display = 'block';
}
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You may need to check the bootstrap docs to be sure what the class name it adds in.
How to use a button to show the modal in other components? For example, I have the following components:
info.vue
<template>
<div class="container">
<button class="btn btn-info" #click="showModal">show modal</button>
<example-modal></example-modal>
</div>
</template>
<script>
import exampleModal from './exampleModal.vue'
export default {
methods: {
showModal () {
// how to show the modal
}
},
components:{
"example-modal":exampleModal
}
}
</script>
exampleModal.vue
<template>
<!-- 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
hihi
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
How to show the modal from exampleModal.vue? I know that I can
use data-toggle and data-target to show the modal, like this:
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
But is there any way to show the modal by using the method "showModal"?
According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle and data-target attributes in that case:
<div id="app">
<div class="container">
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
<example-modal></example-modal>
</div>
</div>
Edit
I misread the question so i edit my answer.
It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs and then open the modal with a bootstrap method (Bootstrap Programmatic API)
<div id="app">
<div class="container">
<button class="btn btn-info" #click="showModal">show modal</button>
<example-modal ref="modal"></example-modal>
</div>
</div>
methods: {
showModal() {
let element = this.$refs.modal.$el
$(element).modal('show')
}
}
Fiddle example
Without jQuery you could create a function on "method:" block like this:
openEditModal(data){
// <handle with your data>
this.$root.$emit("bv::show::modal", "your-modal-id");
}
The modal is defined as:
<div class="moremodal" style="display:none;">
<div class="modal-dialog modal-lg" style="width: 500px; border: outset; position: fixed; top: 25%; left: 35%;">
<div class="modal-content" style="top:0px;"></div>
</div>
Whenever someone clicks outside the modal, I have disabled the clicks so that the person is forced to choose any options from the modal before proceeding. (This does not work properly for some reason.)
$("*:not('.moremodal')").on("click",function(){
return false;
})
But i want to re-enable clicks on the page after the modal is closed. How do I do that? And where should I call that function or write that code?
EDIT:
There is only one modal which I populate.
Here two bootstrap modal.
1) Close when click on outside of modal.
2) Not close when click on outside of modal.
Hope it will help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Default Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" >Disabled outside click modal</button>
<!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use bootstrap modal and add this code you can entirely achieve your goal.
Hope this will helps you.
$(document).ready(function() {
$("#popup").modal({
show: false,
backdrop: 'static'
});
$("#click-me").click(function() {
$("#popup").modal("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="popup" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
**Your HTML goes here**
</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>
<a id="click-me" class="btn btn-primary">Open</a>
</body>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
Use CSS property "pointer-event: none;" on modal overlay.
Firstly change your selector into something like this (assign an id to the model for ease of selection):
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if(evt.target.id == "modal_id" || $(evt.target).closest("#modal_id").length > 0) {
//if the modal is visible do nothing
if($("#modal_id").is(":visible")) {
return false;
}
}
});
EDIT
If you are dealing with multiple modals and need to use the class selector:
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if($(evt.target).hasClass("moremodal") || $(evt.target).closest(".moremodal").length > 0) {
//if there is a visible model do nothing
if($(".moremodal").is(":visible")) {
return false;
}
}
});
Simply you can use this
<a data-controls-modal="id" data-backdrop="static" data-keyboard="false" href="#">
<head>
<style>
.modal-container {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.8);
display: inline-block;
position: absolute;
top: 0;
left 0;
z-index: 100;
}
.modal-content {
margin: 10%;
backgrond-color: rgba(0,0,0,1);
display: inline-block;
width: 80%;
height: 80%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div> my normal content </div>
<div>
<button type="button" id="open-modal">open the modal</button>
</div>
<div class="modal-container hidden">
<div class="modal-content">
Here is your modal content
<div>
<button type="button" id="close-modal">close</button>
</div>
<div>
</div>
<script src="path/to/jquery/libraries/jquery.min.js"></script>
<script>
$(document).ready(() => {
$('.modal-container').on('click', function(event){
// stop bubbling on clicks
event.preventDefault();
event.stopPropagination();
});
$('#open-modal').on('click', function(){
// show the modal
$('.modal-container').removeClass('hidden');
// disable body scrolling in the background
$('body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
})
$('#close-modal').on('click', function(event){
$('.modal-container').addClass('hidden');
$('body').css('overflow-x', 'auto').css('overflow-y', 'auto');
}
});
</script>
</body>
i think this logical code shows you how it can work. i've not tested it so i think the css part is not 100% correct.
I'm using .NET Framework 4.5, Bootstrap v3.3.6 on a ASP.NET MVC project.
What I want to do is create a modal form
I tried the following:
Created a modal container in the main layout
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;">
x
<div class="modal-content" style="width:500px !important; margin: 10px auto !important;">
<div class="modal-body"></div>
</div>
</div>
Added js to make internal Ajax call to inject content in a partial view
$(function () {
$('body').on('click', 'modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', 'modal-close-btn', function() {
$('modal-container').modal('hide');
});
$('#modal-container').on('hidden.bs.modal', function(){
$(this).removeData('bs.modal');
});
});
Created a partial view that to load in a modal dialog
<div class=" ">
<div class="modal-title" style="color: #3A87AD;">
<h3> Add Content</h3>
</div>
<br />
#using (Html.BeginForm("Create", "Place", FormMethod.Post))
{
<div class="row-fluid">
Enter Content
</div>
<div class="row-fluid">
#Html.textAreaFor(m => m.Text, new { style="width:400px; height:200px;"})
</div>
<div class="row-fluid">
<div class="col-md-4 col-md-offset-4">
<button type="submit" id="btnSave" class="btn btn-sm">Save</button>
<button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$('#btnSave').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
Created action to return the partial view and to process the results of the post
public ActionResult CreateModal()
{
return PartialView("_CreateModal");
}
[HttpPost]
public ActionResult CreateModal(Place model)
{
return RedirectToAction("Index");
}
Created an action link to show the modal when clicked
#Html.ActionLink("Click me", "CreateModal", "Place", null, new { #class = "img-btn-addcontent modal-link", title = "Add Content" })`
My problem is that my modal doesnt look like a modal
Simply add bootstrap.min.js and bootstrap.css to Your bundles for showing/hiding modal.
Your modal body should look like this:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
#Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
and then you call Your modal by:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
Also remember to insert Your partial View into Your modal body.
My solution. You can write this code in cshtml.
Step1:
<script type="text/javascript">
function ShowModal() {
$("#exampleModal").modal('show');
}
</script>
Step2:
<button type="button" class="btn btn-sm btn-default" onclick="ShowModal()">Show modal</button>
Step3:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>