I am currently implementing a modal with bootstrap:
<div class="modal" id="contact-update-view">
<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">×</span></button>
<h4 class="modal-title">Update contact</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="contact-create-name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" id="contact-create-name" name="contact-create-name" data-minlength="2" placeholder="Contact's Name" data-error="Name should at least be 2 characters long" required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-create-phone" class="col-sm-4 control-label">Phone</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</div>
<input type="tel" class="form-control" id="contact-create-phone" name="contact-create-phone" placeholder="Phone Number" pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext...
Utilizing the bootcards-desktop.css found here, it appears that the backdrop is shown above the modal. Upon clicking on the modal, it closes instantly.
This is how I trigger the modal:
<button type="button" class="btn btn-default btn-edit" data-toggle="modal" data-target="#contact-update-view">
<span class="glyphicon glyphicon-pencil"></span>
</button>
In my observation, there is a discrepancy in the css styles:
.modal
z-index:1050;
position:fixed;
.modal-backdrop:
position:fixed;
z-index:1040;
Upon interacting with the modal, it disappears (as if there was a backdrop overlapping it). How can I resolve this issue and ensure the modal functions correctly within bootcards?