I'm working on a reactjs project in which i have nav menus, and i'm using jquery modal pop up, one of my menus is "Import" which contains two sub menus "CCAWB & GAWB" i'm using react component to render these two submenus under "Import"
<li className="has-submenu">
<a href="#">
<span>Import</span>
</a>
<ul className="submenu">
<li>
<ul>
<RenderCCAWB_GAWBPopUp submenu ="CCAWB"/>
<RenderCCAWB_GAWBPopUp submenu ="GAWB"/>
</ul>
</li>
</ul>
</li>
RenderCCAWB_GAWBPopUp Component returns the following
render(){
return(<li onClick={this.handleShowModal}>
{this.props.submenu}
{this.state.view.showModal ? <UpdateQualityHeaderDummy
handleHideModal={this.handleHideModal} menuName={this.props.submenu} />:null}
</li>);}
on click of any of the sub menus "CCAWB/GAWB" i want to show the modal pop up
which's returned by another component
UpdateQualityHeaderDummy returns the modal itself
return (
<div className="modal" data-backdrop='static' id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" >
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">{title}</h5>
<button onClick={this.closePop} type="button" className="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<div className="row">
<div className=" col-lg-12 col-xl-12
qcUpdateStatus">
</div>
<FileUpload menuTitle={this.props.menuName}/>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick ={this.closePop}>Close</button>
<button type="button" className="btn btn-danger" data-dismiss="modal" onClick ={this.downloadFeed}>Download Feed</button>
<button type="button" className="btn btn-primary" onClick={this.validateForm}> Upload </button>
</div>
</div>
</div>
</div>);
} });
till here everything works fine and the modal shows up as attached bellow
[Screen 1 for the scenario ][1]
*= > the problem is here, whenever the mouse pointer leaves the browser (i.e goes to the url bar) the modal and the sub menus disappear but the modal opacity stays there (attached bellow)
Screen 2 when the pointer is outside the page
*= >but they show up immediately as soon as the pointer is back to the page (any where)
attached bellow screen 3
Screen 3 when the pointer is inside the page
*=> my trials: i have tried the event mouseleave(when mouse leaves the browser) and set the visibility of the sub menus as visible but they keep disappearing i even set the modal show property as true in the same event but also doesn't work.
$(document).mouseleave(function () {
$('.modal').css('visibility','visible');
$('#navigation > div > ul > li:nth-child(5) >
ul').css('visibility','visible');
$('#myModal > div').css('visibility','visible');
$('#myModal > div > div').css('visibility','visible');});
any suggestions please ?
Related
I have been trying to get this working for hours, including many of those hours searching stackoverflow and elsewhere on google.
I'm using a rather strange setup via wordpress to iterate a number of bootstrap modals with an HTML anchor value associated with a booth number variable. I have a table with some javascript that, if there is a booth number within a given div, triggers a modal. Generally it's working great, except for one issue:
some of these modals have an id value with a comma seperated list. This isn't something I can structurally change right now, so i'm trying to get comma separated values to play nicely with the javascript and grid container i have set up.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".container1 > *[data-location]").click(function() {
var booth = "#" + jQuery(this).data("location");
jQuery(booth).modal({ show: false});
jQuery(booth).modal('show');
console.log(booth);}); });
here's a small chunk of my grid container:
<div class="k10" id="k10" data-id="k10" booth-number="710" data-location="710">710</div>
<div class="k11" id="k11" data-id="k11" booth-number="611" data-location="611">611</div>
<div class="k12" id="k12" data-id="k12" booth-number=""></div>
<div class="k13" id="k13" data-id="k13" booth-number="610" data-location="610">610</div>
<div class="k14" id="k14" data-id="k14" booth-number="511" data-location="511">511</div>
<div class="k15" id="k15" data-id="k15" booth-number=""></div>
<div class="k16" id="k16" data-id="k16" booth-number="510" data-location="510">510</div>
<div class="k17" id="k17" data-id="k17" booth-number="411" data-location="411">411</div>
<div class="k18" id="k18" data-id="k18" booth-number=""></div>
<div class="k19" id="k19" data-id="k19" booth-number="410" data-location="410">410</div>
<div class="k20" id="k20" data-id="k20" booth-number="311" data-location="311">311</div>
and a couple example pieces of my modals:
<div id="613" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="613">
<div id="710, 712" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="710, 712">
the first example being a working one, and the second a non-working one... I am slowly going mad trying to figure this out, i'd love any help y'all can give!
712"` using like this is totally not recommended. You need to create custom classes to particular modals and to the buttons where you trigger them. Just try below snippet you will more clear on it.
$(document).ready(function(){
$(".btn").click(function(){
var modalID = $(this).attr('data-id');
$("."+modalID).modal('show');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<button type="button" data-id="709" class="btn btn-sm btn-primary">709</button>
<button type="button" data-id="710" class="btn btn-sm btn-primary">710</button>
<button type="button" data-id="712" class="btn btn-sm btn-primary">712</button>
<div class="modal fade 710 712" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">710 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
<div class="modal fade 709" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">709 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
</div>
I have a little problem with open one offcanvas from previous canvas. Generally I have canvas like this using bootstrap 5:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#secondoffcanvas" aria-controls="offcanvasBottom" data-bs-dismiss="offcanvas">Open second offcanvas</button>
</div>
</div>
second offcanvas:
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="secondoffcanvas" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
second content
</div>
</div>
My scenario:
Click to open first offcanvas
Click on the button in canvas
Resulst:
first canvas hide
second canvas open
Read "how it works"...
"Similar to modals, only one offcanvas can be shown at a time."
However, you can open one from the other. Programmatically show the 2nd when the 1st is hidden...
var offcanvasBottom = document.getElementById('offcanvasBottom')
var secondoffcanvas = document.getElementById('secondoffcanvas')
offcanvasBottom.addEventListener('hidden.bs.offcanvas', function () {
var bsOffcanvas2 = new bootstrap.Offcanvas(secondoffcanvas)
bsOffcanvas2.show()
})
Demo
Thanks You #Zim. This resolve my issue. I have one question jet. What You think about identify if event was triggered from button on the offcanvas and no triggered from other place? Because now if You click in othe place second canvas is open too
try this
function toggle() {
document.getElementById('offcanvas').classList.toggle('show');
}
I am working on an experimental project and I was trying playing around with javascript when I encountered this weird thing that I have no explanation for its behavior.I am using bootstrap 4 with CDN. SandboxCode
import React from 'react';
const Button = props => {
const showProps = e => {
e.preventDefault();
console.log(props.day, props.slot);
};
return (
<div>
<div data-toggle="modal" data-target="#myModal">
Click Me!
</div>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Add / Edit Slot</h4>
<button type="button" className="close" data-dismiss="modal">
×
</button>
</div>
<div className="modal-body">
<form>
<div className="form-group">
<label>
<h6>Faculty</h6>
</label>
</div>
<div className="form-group">
<label>
<h6>Venue</h6>
</label>
</div>
<div className="form-group">
<label>
<h6>Subject</h6>
</label>
</div>
<button
type="submit"
className="btn btn-success btn-cons btn-block"
onClick={showProps}
>
Save
</button>
</form>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-danger btn-block"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default Button;
this component provides a button which opens a modal when the Save button is clicked inside the modal then it console's two props (day and slot).
Its parent component is the main component which is then used In the App.js file to be rendered.
import React, { Component } from "react";
import Button from "./Button/Button";
export default class Main extends Component {
render() {
return ["Monday", "Tuesday"].map((day, dayIndex) => {
return [0, 1].map((slot, slotIndex) => {
return (
<Button key={dayIndex + "-" + slotIndex} day={day} slot={slotIndex} />
);
});
});
}
}
Excepted Result:- Upon clicking the button and clicking the save button in modal, each button should console different data depending on props.
Output:- All the save button clicks output the same thing.
I have been stuck on this for two days now and I have tried a lot of things.
Its an id issue :). Look at the below code:
<div data-toggle="modal" data-target="#myModal">
Make the id unique for every modal, otherwise no matter which button you click, it will bring up the modal for the first element it finds with the given id.
See the fixed code in this sandbox, basically changed these two lines to ensure a unique modal id:
<div data-toggle="modal" data-target={`#myModal_${props.day}_${props.slot}`}>
And
<div className="modal fade" id={`myModal_${props.day}_${props.slot}`}>
I am using the bootstrap drop down for a div that contains buttons. The div appears and all, and I see in the dropdown class that a class of "open" is added and the drop down menu has an attribute of "aria-expanded" set to "true". I am pretty sure the bootstrap is working, but I am missing something.
Here is my cshtml template:
#using entryIconContent = Lifegunk.Engine.Resources.Components.EntryIcon
<div class="entry-icon-wrapper">
<div class="entry-type"></div>
<div class="dropdown actions-dropdown">
<div class="dropdown-menu entry-icon-actions">
<button class='change-btn btn btn-default'>
<div class="entry-type"></div>
<span>#entryIconContent.ChangeText</span>
</button>
<button class="move-btn btn btn-default">
<div class="icon-move"></div>
<span>#entryIconContent.MoveText</span>
</button>
<button class='go-btn btn btn-default'>
<div class="icon-arrow-right"></div>
<span>#entryIconContent.GoText</span>
</button>
</div>
</div>
<div class="dropdown entry-types-dropdown">
<ul class='dropdown-menu'></ul>
</div>
</div>
And here is my snippet of javascript code where I call the .dropdown() func:
$entryTypeIcon.click(function () {
if (isEditMode) {
$entryTypesDropMenu.dropdown("toggle");
renderEntryTypes();
} else {
$entryActionsDropdown.dropdown("toggle");
}
if ($entryTypesDropMenu.is(":visible")) {
$entryTypesDropMenu.hide();
$entryActionsDropdown.hide();
}
});//end $entryTypeIcon click handler
I have a modal with a large content in it.
So I want the modal be the max-hight of my window and the content should be scrollable within the modal.
This is what my modal is right now:
<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Error Log: {{ log_name }}</h4>
</div>
<div class="modal-body">
<pre>
{{ log_content }}
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" ng-click="clear_log( )"><span class="glyphicon glyphicon-trash"></span></button>
<button type="button" class="btn btn-default pull-left" ng-click="refresh_log( )"><span class="glyphicon glyphicon-refresh"></span></button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Thank you.
With pure CSS it's not possible, you can achieve the dynamic height of modal according to window size with following piece of script with suggested answer CSS in comments;
Script
$('#myModal').on('show.bs.modal', function () {
$('pre').css('height',$( window ).height()*0.9);
});
CSS
.modal-body {
overflow-y: auto;
}
Fiddle
Note: You have to adjust the height and may be the target class which you want to be with dynamic height, in example I target pre you can also try with $('.modal-body').css('height',$( window ).height()*0.9); which ever suits your need and according to design.
Or you can totally remove CSS suggested above and set the height in JS like as follow;
$('pre').css('height',$( window ).height()*0.6);
For Remote Modals
With remote modals above solutions will not work so with remote modals if you want to adjust the height of the selector e.g modal-body then following script and CSS can do the trick with bootstrap modal loaded event
$('#myModal').on('loaded.bs.modal', function () {
$('pre').css('height',$( window ).height()*0.6);
});
CSS
.modal-body {
overflow-y: auto;
}
Bootstrap Modal events Functions