myModal displays an image. After I close, it doesn't clear the data from previous modal. Here is what i have done so far.
<a href="#myModal" class="btn btn-default" data-toggle="modal" data-remote-image="resources/uploads/<?= $s->photo_url; ?>">
<i class="fa fa-image"></i>
</a>
Modal body :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Slide</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Javascript :
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (e) {
$('<img class="img-responsive" src="'+ e.relatedTarget.dataset.remoteImage+ '">').load(function() {
$(this).appendTo($('#myModal .modal-body'));
});
});
$('#myModal').on('hidden.bs.modal', function (e){
$(this).removeData();
});
</script>
Try:
$(this).removeData('bs.modal');
Without seeing more of the surrounding code it is hard to tell. But you could just empty the modal:
$('#myModal .modal-body').empty()
Related
I'm adding a button close that will close/hide the Modal diaglog when button is clicked. for some reason nothing is happening when the button is clicked. I assume that the modal id is not recognized after button is clicked. not sure what could be the correct approach?
<--Index.cshtml-->
<div class="form-button-action">
<button type="button" class="btn btn-link btn-lg" id="Edit" onclick="Edit(#item.Id)">
<a class="fas fa-pencil-alt" data-toggle="tooltip" data-placement="top" title="Edit Session"></a></button>
</div>
<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body" id="myModalBodydiv" data-backdrop="static" data-keyboard="false">
</div>
</div>
</div>
</div>
<script>
var Edit = function (id) {
$.ajax({
type: "GET",
url: "/Exposure/EditSession",
data: { Id: id },
success: function (response) {
$("#myModalBodydiv").html(response);
$('#myModalForm').modal({ backdrop: 'static', keyboard: false })
$("#myModalForm").modal("show");
$("#myModalForm").appendTo("body");
}
})
}
</script>
<--partialView.cshtml-->
#model Insured
<div class="modal-header no-bd">
<h1 class="fw-mediumbold">
Title
</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer no-bd">
<button type="submit" class="btn btn-light" id="closeModal" data-dismiss="modal">Close</button>
</div>
<script>
$("#closeModal").click(function () {
$('#myModalBodydiv').modal('hide');
});
</script>
I'm using squarespaceModal from this site
I would like to know if is it possible to pass the id to the code of the modal ?
This is the button who's calling the modal :
<div class="center">
<button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
update
</button>
</div>
This is the first line of the modal :
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
That is just a standard Bootstrap Modal I dont see anything special about it. Therefore you have all the events you would like from the modal.
So you "could" write an event to trap everytime a modal is opened.
$(function() {
$('#myModal').on('shown.bs.modal', function() {
alert($(this).attr('id'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
<div class="modal-dialog" role="document">
<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" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is my modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
On your button click set the require value into your input fields of modal and then show modal using below code.
$(".update_pro").click(function () {
$('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
$('#squarespaceModal').modal('show');
});
If come across issue of displaying modal then remove
data-target="#squarespaceModal"
Cheeerssss
Here you go with a solution https://jsfiddle.net/32jsq6aL/
$('button[data-toggle="modal"]').click(function(){
$($(this).data('target')).attr('btn-id', $(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<button id="test 1" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">update</button>
</div>
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
</div>
OnClick on the button, get the data-target and attach an attribute btn-id as button id to the targeted modal.
Hope this will help you.
I'm currently having a problem. I need to open another modal once i clicked a link inside the current modal. I tried adding the data-dismiss="modal" on the hyperlink inside the data-content but no luck and I'm stuck. I'm very very new to bootstrap too. I just started last week.
My code goes like this:
<a href="" data-target="#modal1" data-toggle="modal">
<img src="logos/tools.png" class="pop text-center" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<h3>aaa</h3>
asd ' data-original-title="" title="" ">
<h3>xxx</h3>
</a>
<div tabindex="-1" class="modal fade" id="modalscd" role="dialog" aria-hidden="true" aria-labelledby="modalscd">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title" id="proddevtools"><h4>Source Code Deployment</h4>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
The js script
<script type="text/javascript">
$("[data-toggle=popover]").popover({
html: true
})
</script>
<script type="text/javascript">
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
})
.on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 30);
});
</script>
$('#myModal-1').on('hide.bs.modal', function (event) {
$('#myModal-2').modal('show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-1">
Open modal 1
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Modal 1 content, click Here to close it
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="myModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Modal 2 content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm using .NET Framework 4.5, Bootstrap v3.3.6 on a ASP.NET MVC project.
What I want to do is create a modal form
I tried the following:
Created a modal container in the main layout
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;">
x
<div class="modal-content" style="width:500px !important; margin: 10px auto !important;">
<div class="modal-body"></div>
</div>
</div>
Added js to make internal Ajax call to inject content in a partial view
$(function () {
$('body').on('click', 'modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', 'modal-close-btn', function() {
$('modal-container').modal('hide');
});
$('#modal-container').on('hidden.bs.modal', function(){
$(this).removeData('bs.modal');
});
});
Created a partial view that to load in a modal dialog
<div class=" ">
<div class="modal-title" style="color: #3A87AD;">
<h3> Add Content</h3>
</div>
<br />
#using (Html.BeginForm("Create", "Place", FormMethod.Post))
{
<div class="row-fluid">
Enter Content
</div>
<div class="row-fluid">
#Html.textAreaFor(m => m.Text, new { style="width:400px; height:200px;"})
</div>
<div class="row-fluid">
<div class="col-md-4 col-md-offset-4">
<button type="submit" id="btnSave" class="btn btn-sm">Save</button>
<button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
}
</div>
<script type="text/javascript">
$(function () {
$('#btnSave').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
Created action to return the partial view and to process the results of the post
public ActionResult CreateModal()
{
return PartialView("_CreateModal");
}
[HttpPost]
public ActionResult CreateModal(Place model)
{
return RedirectToAction("Index");
}
Created an action link to show the modal when clicked
#Html.ActionLink("Click me", "CreateModal", "Place", null, new { #class = "img-btn-addcontent modal-link", title = "Add Content" })`
My problem is that my modal doesnt look like a modal
Simply add bootstrap.min.js and bootstrap.css to Your bundles for showing/hiding modal.
Your modal body should look like this:
<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>
`
and then you call Your modal by:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
Also remember to insert Your partial View into Your modal body.
My solution. You can write this code in cshtml.
Step1:
<script type="text/javascript">
function ShowModal() {
$("#exampleModal").modal('show');
}
</script>
Step2:
<button type="button" class="btn btn-sm btn-default" onclick="ShowModal()">Show modal</button>
Step3:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<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-primary">Save changes</button>
</div>
</div>
</div>
</div>
I created a jquery modal popup modal of Bootstrap.
I want the popup show after link cliked and download a file.
-- HTML --
<!-- Link -->
<a class="download-link" data-toggle="modal" data-target="#myModal" href="http://ourdomain.com/get/file_download.zip" rel="nofollow">Download</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is the body text
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
-- Javascript --
$('[data-toggle=modal]').on('click', function (e) {
var $target = $($(this).data('target'));
$target.data('triggered',true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show').data('triggered',false);
};
}, 1000); // milliseconds
return false;
});
The problem is when I click the link, the file is not downloaded, just show up popup. Any idea how to do it??
You can create another link, hide it and trigger click on this anchor when your modal is opening:
HTML:
<!-- Link -->
<a href="#" data-toggle="modal" data-target="#myModal" rel="nofollow" download>Download</a>
aa
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is the body text
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JS:
$('[data-toggle=modal]').on('click', function(e) {
var $target = $($(this).data('target'));
$target.data('triggered', true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show').data('triggered', false);
};
}, 1000); // milliseconds
return false;
});
$('#myModal').on('show.bs.modal', function () {
$('#download')[0].click();
});
CODEPEN