React Bootstrap modal appearing under background - javascript

In my render function I have the following code for a modal
<div id="newListModal" className="modal fade" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Create new list</h4>
</div>
<div className="modal-body">
<p>Select category</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
All of the containing tags are positioned in the default way.
However, when I click on the button which triggers the modal, the modal appears under the background.
Since I have no special positioning of tags, I am assuming that this is a React issue.
Any ideas about why this is happening?

The problem is your background and modal both are located under root div. So you can overcome this problem by creating another div separately.
index.html
<html>
<body>
<div id="root"></div>
<div id="list-modal"></div>
</body>
</html>
ListModal.js (component)
return ReactDOM.createPortal(<div id="newListModal" className="modal fade" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Create new list</h4>
</div>
<div className="modal-body">
<p>Select category</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>,document.getElementById("list-modal"));

Related

Is there a way to use #click (v-on:click) to open one modal, while simultaneously closing a second one (that is already open?)

I want this to close a modal named confirmationModal and another named showModal. I was thinking of doing this from the on click event, or maybe writing a simple if/else method but nothing seems to work
<div v-if="showModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<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" #click="showModal = false">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal_header_text">Are you Sure?</div>
<img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
<div class="modal_redeem_text">Redeem for Flyaway?</div>
</div>
<div class="modal-footer">
<button type="button" id="reclamation_btn" class="btn btn-primary" #click="confirmationModal = true">Redeem</button>
<button type="button" id="close_btn" class="btn btn-secondary" #click="showModal = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
<div v-if="confirmationModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<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" #click="confirmationModal = false">×</span>
</button>
</div>
<div class="modal-body">
<img class="redeem_image" src="https://www.fillmurray.com/g/460/420" alt="people"/>
</div>
<div class="modal-footer">
<button type="button" id="final_reclamation_btn" class="btn btn-primary" #click="confirmationModal = false">Redeem</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
You can achieve it in the following way:
#click="confirmationModal=false;showModal=true"

How to prevent modal appearing on page load while using backdrop:'static'

I have a dialog box which should appear whenever I click on a checkbox. But it should not disappear when clicking outside or pressing escape. so I used backdrop='static' , keyboard='false' in my jquery.
but then this dialog box is appearing whenever I load or refresh the page.
$('#storeStatusDialog').modal({
backdrop: 'static',
keyboard: false
})
<div class="container">
<div class="modal fade" id="storeStatusDialog" role="dialog" >
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span></button>
</div>
</div>
</div>
</div>
</div>
Please tell me a way to prevent dialog box appearing when page gets loaded.
thank you so much.
HTML:
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#storeStatusDialog">
Launch
</button>
<div class="modal fade" id="storeStatusDialog" role="dialog">
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span>
</button>
</div>
</div>
</div>
</div>
</div>
Js:
$('#storeStatusDialog').modal({
show: false,
backdrop: 'static',
keyboard: false
})
Snippet:
http://codepen.io/anon/pen/dpEjxK

append bootstrap calendar on div not on body

I am trying to open a bootstrap calendar in a modal(popup) window. by default it append on body. is there is any way to append that calendar on a div.
Actually when scroll the page the calendar goes out away through to the popup window.
I hope this helps. Add content in modal-body.
<a href="#" data-toggle="modal" data-target="#createapp">
ABC</a>
<div class="modal fade" id="createapp" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body" id="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Modal not displayed

I have placed a sample modal in the front end of my application.
The modal is the following:
<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>
I got the code for the modal from here:
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
The modal is nested like this:
<div className="col-md-4 no-padding max-height-col">
<div className="panel panel-default no-padding max-height">
<div className="panel-heading" >
<h2 className="panel-title headingText">
Attributes <span className="glyphicon glyphicon-plus" aria-hidden="true"></span>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open 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>
</h2>
</div>
</div>
</div>
However, when I deploy the code to the server, the modal's code does not appear in the page.
I am certain that I am building and deploying correctly.
Any ideas about why this is happening?
I think that your problem is that you haven't imported all the required libs. You have to know that bootstrap require JQuery and if you don't include it your modal won't be displayed. This example work (I put also the include of JQuery)
<html>
<head>
<title>Hello</title>
<link href='bootstrap-3.3.5-dist/css/bootstrap.min.css' rel='stylesheet' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src='bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<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>
</body>
</html>

bootstrap dialog get closed on click on area inside it

I'm trying to use bootstrap material and my problem is that dialog get colsed immediately after I click inside it. I'd like to be able to close it but only on close button or clicking outside. But not indiside!
<div class="container-fluid">
<section id="landing">
<button id="video-button" class="btn btn-success btn-raised" data-toggle="modal" data-target="#video-dialog">
Quick tour
</button>
</section>
<section id="about">
</section>
<!-- video dialog -->
<div id="video-dialog" class="modal fade" tabindex="-1">
<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">Dialog</h4>
</div>
<div class="modal-body">
<p>body. when I click here the dialog get closed.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
UPDATE
The problem is in div.modal-backdrop because it's before the modal's content and actually covers my dialog.

Categories