Bootstrap modal not working correctly with bootcards - html

Question

Iam using this 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 atleast 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\.?|extension)\s*(\d+))?$" data-error="Enter a valid phone number" required/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="contact-create-email" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input type="email" class="form-control" id="contact-create-email" name="contact-create-email" placeholder="Email" required data-error="The email is invalid"/>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-success" data-toggle="tooltip" title="Yep! Two exclamations and a question mark,arent you excited?">Add contact!</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I use the bootcards-desktop.css from here,I find that the backdrop is displayed above the modal.When I click on the modal it is dismissed immediately.
I open the modal with this:
<button type="button" class="btn btn-default btn-edit" data-toggle="modal" data-target="#contact-update-view">
<span class="glyphicon glyphicon-pencil"></span>
</button>
I see this difference in the css:
.modal
z-index:1050;
position:fixed;
.modal-backdrop:
position:fixed;
z-index:1040;
When I click on the modal,it disappears(as if there was a backdrop on top of the modal),how can I get the modal to work correctly with bootcards?

Answer 1

It's not a Bootstrap 3.3.1 issues, nor a Bootcards issue. The problem is in the setup: the bootcards-desktop.min.css file (as well as the Android and iOS versions) is a concatenated version of Bootstrap (v3.2.0 at the moment) as well as the Bootcards CSS file. This is offered so you have one less HTTP request to make. In the dist folder of the Bootcards download, you'll also find versions of the CSS files without the built-in Bootstrap: they have a -lite suffix (and are a lot smaller...).
In your Plunkr, if I change the Bootstrap version to v3.3.1 AND change bootcards-desktop.min.css to bootcards-desktop-lite.min.css it all works again.
I'll release another version of Bootcards soon that will extend Bootstrap v3.3.1.