I just cant figure out how to open this modal. I usually use Bootstrap, but wanted to try a new layout.
Here is the button that I use to open the Modal:
<div class="ui pointing menu">
<a class="item" id="#register">Register</a>
#include('auth.modals')
</div>
Here is my Modal:
<div id="register-modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="">
</div>
<div class="description">
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
And Here is my JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$(document).ready(function(){
$('#register').click(function(){
$('#register-modal').modal('show');
});
});
</script>
The whole problem is that the element to which you try to attach the click event does not exist. You have specified id="#register", instead of id="register"
correcting the attribute will do the job:
<div class="ui pointing menu">
<a class="item" id="register">Register</a>
#include('auth.modals')
</div>
The id of the modal itself seems to be correct, though :)
Such things are very easy to debug, simply type $('#register') in the console, and you'll see that jquery cannot find any matching element.
Figured it out!
I guess the button that you open the modal with has to be a class?
<a class="item register">Register</a>
Then pass in JavaScript like this:
<script>
$(document).ready(function(){
$('.register').click(function(){
$('#register-modal').modal('show');
});
});
</script>
I have a modal in a partial file that is loaded into my main view with an ng-include tag, but the template isn't found. I don't see the template being loaded in console or the console network tab. I get the following message: Error: [$compile:tpload] Failed to load template: rxsignalUpdateModal.html
controller:
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'rxsignalUpdateModal.html',
controller: 'ModalInstanceCtrl',
size: size
});
};
view:
<div class="col-md-12 col-lg-12">
<div class="h4 invisible"></div>
<div class="rxsignal-chart-bubble" ui-view="rxsignal-chart-bubble"></div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-muted panel-title">
{{ Drug.aedrug_name | pascalCaseFilter }} RxSignal
</span>
<button class="btn btn-info btn-mini restoreSortButton pull-right"
ng-click="clearLocalStorage()"
popover-append-to-body="true" popover-trigger="mouseenter"
popover-placement="top" popover="Reload grid with default sorting order">
Restore Default Settings
</button>
<span id="rxsignal-filter-view" ui-view="rxsignal-filter"></span>
</div>
<div class="gridStyle" ng-grid="drugRxsignal.options" id="portfolio-rxsignal-grid"></div>
</div>
</div>
</div>
</div>
<div ng-include="app/drug/partials/drug.rxsignal.update.modal.html"></div>
partial:
<!-- modal -->
<h1> test </h1>
<script type="text/ng-template" id="rxsignalUpdateModal.html">
<div class="modal-header">
<h3 class="modal-title letter-title">Modal Title</h3>
</div>
<div class="modal-body">
<div class="letter-body">
<p>text</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">OK</button>
</div>
</script>
<!-- end modal -->
The solution required a few changes. I removed the ng-include code, and simply added the full path in the modal instance object:
var modalInstance = $modal.open({
animation: true,
templateUrl: 'app/common/partials/rxsignal-update-modal.html',
controller: 'ModalInstanceCtrl',
size: size
});
Then, in the template partial, I removed the script tags so that it was just html.
The script/template element (text/ng-template) requires a leading '/' or other path on the id attribute for it to work properly.
Right: <script type='text/ng-template' id='/my-template.html'>
Wrong: <script type='text/ng-template' id='my-template.html'>
See plunkr: http://plnkr.co/edit/BA26CP?p=preview
Angular docs for script:
https://code.angularjs.org/1.3.18/docs/api/ng/directive/script
When trying to test a visible button on a modal window using protractor and angular, I receive the error following error:
UnknownError: unknown error: Element is not clickable at point (400, 234). Other element would receive the click: <div class="modal-footer">...</div>'.
I have tried resizing the window to a larger size in the before each statement, and have tried a scrollTo the top of the page before the click as well. Any suggestions?
Code:
it('should create a new portfolio when modal form is completed', function () {
portfolio_create_btn.first().click().then();
element(by.model('portfolios.portName')).sendKeys('Test');
element(by.css('#portfolio-modal-create-button')).click();
Tabs.filter(function (elem, index) {
return elem.getTagName('tab-heading').getText();
}).then(function (filteredElements) {
expect(filteredElements.length).toEqual(expect_tabs_len_start + 1);
});
});
Most of the HTML:
<div class="container-fluid">
<h1 class='port-title port-manager-header title custom-inline'>Portfolios</h1>
<div ng-controller="ModalCtrl" class='create-new-frame'>
<!--todo move to a partial or into $templateCache -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Create New Portfolio</h3>
</div>
<form name='eventForm' method="POST">
<div class="modal-body">
<input id='create-new-portfolio-input' class='form-control' ng-model='portfolios.portName'
placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="true">
<span class="help-inline" ng-show="notUnique">Portfolio name already used</span>
<!--
Private/Group selection to be used in future versions
<div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'">Group</label>
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'">Private</label>
</div>
-->
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(portfolios.portName)"
ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'>
Create
</button>
<button class="btn btn-warning" ng-click="cancel()" id='portfolio-modal-cancel-button'>Cancel</button>
</div>
</form>
</script>
<button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')">Create New</button>
</div>
<div class="title port-title custom-inline pull-right">
<!-- <span class="text-muted">
Organization // user
</span> -->
</div>
</div>
It turned out that the test before the one causing problems was opening the modal and leaving it open, and then when this test tried to open a new modal, couldn't find the button to do so because the modal was already open. I didn't realize that the very first line of the test was causing the error until I looked more closely. Problem solved.
I am using the bootstrap 3 framework. I've created a modal window, it opens fine, I click the close button, nothing happens. I click outside the modal window and it closes returning me to my web page. I cannot get the close button to work. I've tried 'hide' 'toggle'... nothing. Any insight much appreciated!
> <div class="person"> <h2>Person name</h2> <p><a href="#"
> id="John-bio" class="position"> John Smiths Bio</a></p>
> <div class="modal hide" id="John">
> <div class="modal-header"> <h1> John Smith Bio</h1> </div>
> <div class="modal-body"> <p>With more than...</div>
> <div class="modal-footer"> Close </div>
> $(function() {
> $("#John-bio").click(function(e) { e.preventDefault();
> $("#John").modal('show'); }); });
You'll need to add a close action to the button like so: data-dismiss="modal"
<div class="modal hide" id="John">
> <div class="modal-header"> <h1> John Smith Bio</h1> </div>
> <div class="modal-body"> <p>With more than...</div>
> <div class="modal-footer"> Close
</div>
The issue is: I'm using parrallx scrolling, so I have z-index in the page
now when I try to popup a box-modal by Bootstrap I get him to look like this https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png
As you can see, the box-modal isn't on top and any mouse click disables it.
if I disable this css code :
#content {
color: #003bb3;
position: relative;
margin: 0 auto;
width: 960px;
z-index: 300;
background: url('../images/parallax-philosophy-ltl.png') top center;
}
the box modal works.
just to notice, Bootstrap default .modal is z-index:1050 , so I can't understand why it's not on top of all other context.
that's the box-modal:
<section id="launch" class="modal hide fade">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>אשר הגעה לחתונה </h3>
</header>
<div class="modal-body">
<form method="post" action="/update" id="myForm2">
<input type="radio" id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
<p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
<p>כמה אנשים מגיעים? </p>
<select name="number" id="number">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<hr/>
<input type="hidden" name="title" id="title" value="{{title}}">
<input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
<p>סיבה לאי הגעה</p>
<input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
<hr/>
<p class="submit"><input type="submit" name="submit" value="שלח"></p>
</form>
</div>
<footer class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</footer>
</section>
and I trigger him from top menu:
<li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>
thanks ahead.
EDIT
Solution found if anyone falls to the same problem.
this is the way: add data-backdrop="false" to section or div that you contain the modal with
e.g: <section id="launch" class="modal hide fade in" data-backdrop="false">
notice that it doesn't get the gray background that way, so it's kinda a dirty solution, will be happy to hear of a better one.
The problem almost always has something to do with "nested" z-indexes. As an Example:
<div style="z-index:1">
some content A
<div style="z-index:1000000000">
some content B
</div>
</div>
<div style="z-index:10">
Some content C
</div>
if you look at the z-index only you would expect B,C,A, but because B is nested in a div that is expressly set to 1, it will show up as C,B,A.
Setting position:fixed locks the z-index for that element and all its children, which is why changing that can solve the problem.
The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want. Firebug in Firefox has a tab in the far right named "Layout" and you can quickly go up the parent elements and see where the z-index is set.
I found this question as I had a similar problem. While data-backdrop does "solve" the issue; I found another problem in my markup.
I had the button which launched this modal and the modal dialog itself was in the footer. The problem is that the footer was defined as navbar_fixed_bottom, and that contained position:fixed.
After I moved the dialog outside of the fixed section, everything worked as expected.
The modal dialog can be positioned on top by overriding its z-index property:
.modal.fade {
z-index: 10000000 !important;
}
Well, despite of this entry being very old. I was using bootstrap's modal this week and came along this "issue".
My solution was somehow a mix of everything, just posting it as it may help someone :)
First check the Z-index war to get a fix there!
The first thing you can do is deactivate the modal backdrop, I had the Stackoverflow post before but I lost it, so I wont take the credit for it, keep that in mind; but it goes like this in the HTML code:
<!-- from the bootstrap's docs -->
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
<!-- mind the data-backdrop="false" -->
<div class="modal-dialog" role="document">
<!-- ... modal content -->
</div>
</div>
The second approach was to have an event listener attached to the bootstrap's shown modal event. This is somehow not so pretty as you may think but maybe with some tricks by your own may somehow work. The advantage of this is that the element attaches the event listener and you can completely forget about it as long as you have the event listener attached :)
var element = $('selector-to-your-modal');
// also taken from bootstrap 3 docs
$(element).on('shown.bs.modal', function(e) {
// keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
var backDrop = $('.modal-backdrop');
$(element).append($(backDrop));
});
The second.1 approach is basically the same than the previous but without the event listener.
Hope it helps someone!
I had this problem too.
Problem is comming from html, created by bootstrap js:
<div class="modal-backdrop fade in"></div>
This line is created directly before end of <body> element. This cause "z-index stacked element problem." I believe that bootstrap .js do creation of this element wrong. If you have in mvc layout page, this script will cause still the same problem. Beter js idea cut be to get target modal id and inject this line to html before...
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
SO SOLUTION IS repair bootstrap.js - part of modal:
.appendTo(this.$body)
//REPLACE TO THIS:
.insertBefore(this.$element)
ok, so if you are using bootstrap-rtl.css,
what you can do is go to the following class .modal-backdrop
and remove the z-index attribute.
after that all should be fine
I fell into this this with using the JQLayout plugin, especially when using nested layouts and modals with Bootstrap 4.
An overriding css needs to be added to correct the behaviour,
.pane-center{
z-index:inherit !important;
}
Try this Script:
function addclassName(){
setTimeout(function(){
var c = document.querySelectorAll(".modal-backdrop");
for (var i = 0; i < c.length; i++) {
c[i].style.zIndex = 1040 + i * 20 ;
}
var d = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}
Resolved this issue for vue, by adding to the options an id: 'alertBox' so now every modal container has its parent set to something like alertBox__id0whatver which can easily be changed with css:
div[id*="alertBox"] { background: red; }
(meaning if id name contains ( *= ) 'alertBox' it will be applied.
function ShowGroupModal()
{
$('#dvGroupInfoPopup').removeClass("fade");
return false;
}
function GroupModelReset()
{
$('#txtGroupName').val("");
$('#dvGroupInfoPopup').addClass("fade");
return false;
}
function SaveClientDetails()
{
if($('#txtName').val() == "")
{
alert("Please enter Client Name");
$('#txtName').focus();
return false;
}
else
{
alert("Client information successfully saved.");
return false;
}
}
function SaveGroup()
{
if($('#txtGroupName').val() == "")
{
alert("Please enter Group Name");
$('#txtGroupName').focus();
return false;
}
else
{
alert("Group information successfully saved.");
return false;
}
}
.fade {display:none;}
.show {display:block;}
.modalParentBox { z-index : 10040 !important;}
.modalChildBox { z-index : 10042 !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Parent Modal-->
<div class="modal show modalParentBox" id="idModalAddClient" data-bs-backdrop="static" tabindex="1" aria-labelledby="ModalAddClientLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content border-top border-0 border-4 border-primary">
<div class="modal-header">
<h5 class="modal-title" id="ModalAddClientLabel"></h5>
<div>
<i class="bx bxs-user me-1 font-22 text-primary"></i>
</div>
<h5 id="idH5AddUpdateClientHeader" class="mb-0 text-primary">Add Client</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xl-12 mx-auto">
<div class="border p-3 rounded">
<div class="row mb-3">
<label for="ddlGroupToAddClient" class="col-lg-4 col-form-label"><span class="text-danger">* </span>Group <b>:</b></label>
<div class="col-lg-8">
<div class="input-group">
<select class="form-select" id="ddlGroupToAddClient">
<option selected="selected" value="-1">-- Select Group --</option>
</select>
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#dvGroupInfoPopup" onclick="ShowGroupModal()">Add Group</button>
</div>
<span id="idSpnClientTypeError" name="nameSpnForClearAddClientError" class="text-danger small fw-bold"></span>
</div>
</div>
<div class="row mb-3">
<label for="txtName" class="col-lg-4 col-form-label"><span class="text-danger invisible">* </span>Client Name <b>:</b></label>
<div class="col-lg-8">
<input type="text" class="form-control" id="txtName" maxlength="150">
<span id="idSpnCompanyNameError" name="nameSpnForClearAddClientError" class="text-danger small fw-bold"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="idBtnSaveClient" type="button" class="btn btn-sm btn-primary" onclick="SaveClientDetails()">Save</button>
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!--Child Popup Modal-->
<div id="dvGroupInfoPopup" class="modal fade modalChildBox" tabindex="2" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dvGroupInfoPopupLabel">Add Group</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="GroupModelReset()"></button>
</div>
<div class="modal-body">
<div class="row mb-2">
<div class="col-lg-5">
<label for="txtGroupName" class="form-label">Group Name:<span class="text-danger">*</span></label>
</div>
<div class="col-lg-7">
<input id="txtGroupName" type="text" maxlength="150" class="form-control" autocomplete="off" required />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-sm" onclick="SaveGroup()">Save Group</button>
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal" aria-label="Close" onclick="GroupModelReset()">Cancel</button>
</div>
</div>
</div>