Why data-dismiss in bootstrap is not working? - asp.net-mvc

Question

The data-dismiss in bootstrap is not working. It is working in another project but not in this project. Please suggest me where I am going wrong.
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
#Html.TextBoxFor(m => m.txtName)
<button type="submit" id="submit" data-toggle="modal" data-target="#myModal">Produce Page</button>
}
//My Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
...
<div class="modal-header">
...
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Go to My Home</button>
</div>
</div>

Answer 1

You can try this snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> #using (Html.BeginForm("Index", "Home", FormMethod.Post)) { #Html.TextBoxFor(m => m.txtName)
<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">
<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">
#Html.Partial("My partial View")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap modal with Pure Javascript
(function() {
"use strict";
var Modal = function(el, options) {
var self = this;
this.el = document.querySelector(el);
this.options = options;
try {
var list = document.querySelectorAll('#' + this.el.id + ' [data-dismiss="modal"]');
for (var x = 0; x < list.length; x++) {
list[x].addEventListener('click', function(e) {
if (e) e.preventDefault();
self.hide();
});
}
} catch (e) {
console.log(e);
}
};
/**
* Methods
*/
Modal.prototype.show = function() {
var self = this;
// adding backdrop (transparent background) behind the modal
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop === null) {
backdrop = document.createElement('div');
backdrop.id = "bs.backdrop";
backdrop.className = "modal-backdrop fade in";
document.body.appendChild(backdrop);
}
}
// show modal
this.el.classList.add('in');
this.el.style.display = 'block';
document.body.style.paddingRight = '13px';
document.body.classList.add('modal-open');
};
Modal.prototype.hide = function() {
var self = this;
// hide modal
this.el.classList.remove('in');
this.el.style.display = 'none';
document.body.style = '';
document.body.classList.remove('modal-open');
// removing backdrop
if (self.options.backdrop) {
var backdrop = document.getElementById('bs.backdrop');
if (backdrop !== null) document.body.removeChild(backdrop);
}
};
/* Event */
document.addEventListener('DOMContentLoaded', function() {
var m = new Modal('#MyModal', {
backdrop: true
});
document.getElementById('btn-open').addEventListener('click', function(e) {
if (e) e.preventDefault();
m.show();
});
});
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> #using (Html.BeginForm("Index", "Home", FormMethod.Post)) { #Html.TextBoxFor(m => m.txtName)
Click Me }
<div id="MyModal" class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>