We Keep Coding

show and ng-show is not helping out for below div

when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()

Page unresponsive after modal close

A have a webapp developed with Spring boot and thymeleaf a s front end.
We display all the groups available to review. Once user clicks a group we list documents in it tabular form and once user clicks on and document we provide its details. All these I am handling through ajax call and defining on click method. Once user gets to detail section they are provided with more details on that document where they can go and modify or add more through modal. Below is the modal
<!-- Modal start-->
<div id="editModal" tabindex="-1" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 id="pTitle" class="modal-title">Edit</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row" id="firstNameRow">
<div class="form-group col-sm-12">
<label for="firstName" class="col-sm-4">First Name: </label>
<input class="col-sm-8" type="text" id="firstName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
<span class="text-danger" style="display:none;float: right;" id="firstNameError">First name is required.</span>
</div>
</div>
<div class="row" id="middleNameRow">
<div class="form-group col-sm-12">
<label for="middleName" class="col-sm-4">Middle Name: </label>
<input class="col-sm-8" type="text" id="middleName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
<span class="text-danger" style="display:none;float: right;" id="middleNameError"></span>
</div>
</div>
<div class="row has-danger" id="lastNameRow">
<div class="form-group col-sm-12">
<label for="lastName" class="col-sm-4">Last Name: </label>
<input class="col-sm-8 is-invalid" type="text" id="lastName" maxlength="32" onkeydown="return validateInputFields(this,event)" />
<div class="text-danger" style="display:none;float: right;" id="lastNameError" >Last name is required.</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" th:onclick="'save();'" id="saveButton" data-backdrop="false" data-keyboard="false">Save</button>
<button type="button" class="btn btn-neutral" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!--Modal end-->
And here is my save function:
function saveParty(){
var hasError = validateParty();
if(!hasError){
//To close the modal and get back to the previous screen
document.getElementById("saveButton").setAttribute("data-dismiss","modal");
var data = loadPartyDetails();
var objectID = $("#objectID").val();
$.ajax({
type : "POST",
contentType: "application/json",
url: "/saveDetails/" + objectID + "/",
data: JSON.stringify(data),
timeout : 100000,
success : function(result) {
$("#detailsPanel").html(result);
document.getElementById("successMsgParties").style.display="";
$('#successMsgParties').delay(5000).fadeOut('slow');
},
error : function(e) {
console.log("ERROR: ", e);
},
done : function(e) {
console.log("DONE");
}
});
}
}
The call to make modal open:
<td class="text-center"><a th:id="${iter.index + 1}" onclick="populateModal(this);" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editModal"></a></td>
And all this has been working fine. But sometimes all of sudden the whole page hangs up, I cant scroll I cant click on the links and have to refresh the page to continue. There are no errors on the console and have compare the response when the screen freeze and when it doesn't and there is no difference. At this point I am lost on where to look for and what could be the issue. Any directions will be appreciated.
Update: So I found that modal-open class was added but not getting remove when the screen froze, so I added below in my javascript. It does unable to page to scroll but all the links on the page are still disabled.
$("body").removeClass("modal-open");
Alright, I found one more thing, below div element stays there whenever screen freeze. How can I found out which div element is this?
<div class="modal-backdrop fade show"></div>
Any guidelines on how to close the modal appropriately?

Programmatically dismissing a Modal can be done using $('#editModal').modal('hide')
So either the modal is dismissed using the close or cancel button or from the Javascript using the method I shared.

I noticed that the below div element being added which is making screen freeze. I have to hide this through javascript.
<div class="modal-backdrop fade show"></div>

bootstrap modal html content knockout binding not applying popover

When I use the popover control in my modal the bindings do not work.
Here is the default content :
<form id="a" class="form-horizontal" data-bind="submit: SaveModal">
<div class="modal-body modal-content-form">
Default Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary btn-modal-submit" value="Submit">
</div>
</form>
When I click my button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal" data-title="Information" btn-block'=""><i class="fa fa-print"></i>Quote Proposal</button>I get the new Content:
<form id="a" class="form-horizontal" data-bind="submit: SaveModal">
<div class="modal-body modal-content-form">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse001391ce-ebdb-4423-b525-40f97835fa53">Modal Controls</a>
</h4>
</div>
<div id="collapse001391ce-ebdb-4423-b525-40f97835fa53" class="panel-collapse collapse">
<div class="panel-body"><div class="row"><div class="col-sm-6">
<div class="form-group">
<label>Coverage Special</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input id="CoverageSpecial" name="CoverageSpecial" data-bind="value: CoverageSpecial" type="number" step="any" class="form-control control-font">
<span class="input-group-addon">
<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="TextBox Numeric Help : FAQs" data-content="
This control is an html textbox of type (TextNumeric). The values
that are allowed are between a (Minimum) and a (Maximum)
integer. The (Precision) allowed will dictate the amount of
numbers after the decimal. It is (Required) and will
render a label with the (Name) value.
"><i class="fa fa-question-circle"></i></a>
</span>
</div>
<span class="help-block"></span>
</div>
</div></div></div>
<div class="panel-footer"></div>
</div>
</div>
</div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary btn-modal-submit" value="Submit">
</div>
</form>
The problem is that knockout does not work if I dynamically append content. Why?

Knockout doesn't listen to changes made to the DOM. It processes the DOM tree once (after you call applyBindings) and creates event listeners and subscriptions to make sure stuff gets updated once needed. Some bindings, like the with binding, can re-apply bindings to parts of the DOM when needed.
Here's an example of a very basic way to force knockout to re-apply bindings:
We swap out parts of the DOM by using an html binding and an observable that holds the partial HTML
After each swap, we re-apply bindings to the inner part of the element that has the html binding: you cannot apply bindings to an element twice; the outer element is already bound to our initial vm
This example serves to show how knockout works, and isn't the best solution. Managing multiple binding contexts by hand can get messy. I'd suggest creating a custom binding that does this for you. Also, this solution only supports partial views that have one parent element.
var content1 = "<h1 data-bind='text: label1'>test</h1>";
var content2 = "<h2 data-bind='text: label2'>test</h2>";
var partialContent = ko.observable(null);
var reapplyBindingsToPartial = function() {
var partialVM = {
label1: "Heading 1",
label2: "Heading 2"
};
var partialElement = document.querySelector(".js-partialView").firstChild;
ko.applyBindings(partialVM, partialElement);
};
var swap = function() {
if (partialContent() === content1) {
partialContent(content2)
} else {
partialContent(content1);
}
// By now, the `html` binding was re-evaluated
reapplyBindingsToPartial();
};
var vm = {
partialContent: partialContent,
swap: swap
};
ko.applyBindings(vm);
swap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="js-partialView" data-bind="html: partialContent"></div>
<button data-bind="click: swap">
swap
</button>

Use Bootstrap Button Group to Swap Divs

I'm creating a login / register form for a woocommerce shop.
The default woo template shows two side by side forms, one for new customers to register, one for existing customers to login. IMHO this sucks.
I want to use a button group above a single form that swaps out the login / register forms based on the users selection, this way only one option is presented at a time. Hence, I need to swap content, and apply/remove active classes to the appropriate buttons.
I've done the following:
1.) Added a twitter bootstrap button-group like so:
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default active" data-toggle="button">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default">Register</button>
</div>
</div>
</div>
2.) Wrapped the two forms in bootstrap classes and added IDs for simple targeting.
<div id="login_form" class="col-sm-4 col-sm-offset-4">
// login form
</div>
<div id="register_form" clas="col-sm-4 col-sm-offset-4">
//register form
</div>
I know there are built in jQuery plugins for accomplishing this. I've tried using the .active class without success. I also tried using data-toggle="button" and use the .toggle() method without success. I can't wrap my head around the appropriate jQuery, I either end up with both buttons toggled, or no buttons toggled.
Could someone guide me in the right direction?

You can just set some jQuery to hide/show the form divs:
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});
$('#login_click').on('click', function() {
$('#register_form').hide();
$('#login_form').show();
});
$('#register_click').on('click', function() {
$('#login_form').hide();
$('#register_form').show();
});
JS Fiddle: http://jsfiddle.net/ezrafree/HZbvA/
Also, you misspelled the class attribute on button#register_click. Updated markup is:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div id="switch-forms" class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default active">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default">Register</button>
</div>
</div>
</div>
</div>
<div class="row">
<div id="login_form" class="col-sm-4 col-sm-offset-4">
<p>Login Form</p>
</div>
<div id="register_form" class="col-sm-4 col-sm-offset-4">
<p>Register Form</p>
</div>
</div>

For anyone interested I made it work. Not the "bootstrap way" but it works as desired. Someone with better jQuery chops could certainly simplify this.
<script>
$(document).ready(function() {
var login_btn = $('#login_click');
var register_btn = $('#register_click');
var register_form = $('#registration_form');
var login_form = $('#login_form');
// set defaults
register_form.addClass("hidden");
login_btn.addClass("active");
// events for register button
register_btn.on("click", function(){
login_form.addClass("hidden");
login_btn.removeClass("active");
register_btn.addClass("active");
register_form.removeClass("hidden");
});
//events for login button
login_btn.on("click", function(){
register_form.addClass("hidden");
register_btn.removeClass("active");
login_btn.addClass("active");
login_form.removeClass("hidden");
});
});
</script>

Code updated
No jQuery, you could do it with bootstrap collapse.
try this
<div class="col-sm-4 col-sm-offset-4">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" id="login_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Login</button>
</div>
<div class="btn-group">
<button type="button" id="register_click" class="btn btn-default" data-toggle="collapse" data-target=".class1">Register</button>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-4">
<div class="class1 collapse in">123</div>
<div class="class1 collapse">321</div>
</div>
cannot comment in feed. there right way to use toggleClass
not good
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').removeClass('active');
$(this).addClass('active');
});
good
$('#switch-forms .btn').on('click', function() {
$('#switch-forms .btn').toggleClass('active');
});

Bootstrap modal z-index

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>