I have a problem with AJAX modal window. It just shows grey background, but view doesn't appear.
Link to modal window:
<%= link_to "Create Message", messages_path, remote: true, data: { toggle: "modal", target: "#ajax-modal" } %>
<%= render 'messages/create' %>
Modal window (_create.html.erb):
<div id="ajax-modal" class="modal hide fade" tabindex="-1">
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Žinutės siuntimas</h3>
</div>
<div class='modal-body'>
<div class="modal-body-content"></div>
<div class="ajax-loader"></div>
</div>
<div class='modal-footer'>
<button type="button" data-dismiss="modal" class="btn">Atšaukti</button>
</div>
</div>
After I click on link, grey transparent background appears, but doesn't show modal window...
Does anyone know why?
The HTML for your modal is malformed, you are missing the modal-content and modal-dialog divs.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Check this out for more information.
Related
I am trying to open the bootstrap modal by passing the model object dynamically. The modal content is in partial view as follows,
#model int
<div class="modal fade" id="modal-action-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<form>
<input type="text" value="#Model" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" >cancel</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" >delete</button>
</div>
</div>
</div>
</div>
And, here is my div which opens modal by passing model object dynamically,
<div>
#{
for (int i = 5; i > 0; i--)
{
<div>
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-id">
<i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete #i
</button>
#await Html.PartialAsync("_MyPartialView", i)
</div>
}
}
</div>
Now, the problem is no matter which button I click here it only passes the value 5 to the partial view. Also, I have only seen #await Html.PartialAsync() portion of code outside of for loop passing static model to the partial view in different applications. Am I missing anything here, conceptually? Any suggestion would be appreciated.
The reason is all _MyPartialView in same id id="modal-action-id", and that's why you click any button only to show same _MyPartialView.
You could change button data-target="#modal-action-#i"
<button id="deleteModal-#i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="#i" data-target="#modal-action-#i">
and change div id="modal-action-#Model"
<div class="modal fade" id="modal-action-#Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Then, you can get what you want. All tested.
I have the following modal on my page that works perfectly:
<!-- New Topic Modal -->
<div class="modal fade" id="newTopicModal" tabindex="-1" role="dialog" aria-labelledby="newTopicModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newTopicModalLabel">Add a New Topic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "topics/js_form", locals: {topic: #new_topic } %>
</div>
</div>
</div>
</div>
And is triggered by this:
<p class="text-center">Select a topic to add below or <a data-toggle="modal" data-target="#newTopicModal">create a new topic</a>.</p>
However, when I copied it over and tried to do a second one for projects, the screen greys over but no modal appears.
The modal that does NOT work is this:
<!-- New Project Modal -->
<div class="modal fade" id="newProjectModal" tabindex="-1" role="dialog" aria-labelledby="newProjectModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newProjectModalLabel">Add a New Project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "projects/js_form", locals: {project: #new_project } %>
</div>
</div>
</div>
</div>
Triggered by this:
<p class="text-center">Select a project to add this source to below or <a data-toggle="modal" data-target="#newProjectModal">create a new project</a>.</p>
I can't tell why the first one works and the second one doesn't. Can anyone spot what I'm doing wrong?
Today I came across with this, I tried doing what was in the project and came across with the OP's problem about the full screen modal. I saw a solution below about about cutting the div and pasting it in an outer div.
I did what was in the solution but what happens is that the full modal div is retained and the normal popup shows.
If I add it to the script, no popup shows but backdrop changes.
How do I solve this? Thanks in advance
UPDATE
PARENT VIEW BUTTON
<button type="button" class="btn btn-success btn-sm modal-link" data-targeturl="#Url.Action("_Popup","Application",new { MotorId = item.motor_id, Serialno = item.serialno, AppNo = item.application_no, Remarks = item.remarks })"> View
</button>
PARENT MODAL
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
X
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
SCRIPT
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).data("targeturl"), function (data) {
$('<div id="modal-container" class="modal fade">' + '<div class="modal-content" id="modalbody" >' + data + '</div></div>').modal();
});
});
});
PARTIAL VIEW
#model iVehicle.ViewModel.FranchiseViewModel
<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">
<p>Some content here</p>
</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>
Below is my html that I have a modal popup window and a link and when the user click on submit i like to grab the data how would i do that?
#using (Html.BeginForm("Index", "Home", FormMethod.Post }))
{
<!-- 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">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</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 -->
}
#Html.ActionLink("Edit", "Edit", null, new { id = #item.ID }, new { #data_toggle = "modal", #data_target = "#myModal" })
Add name attributes to your input controls and make the button type Submit and remove nested forms for your html, as show below -
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<!-- 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">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" name="Name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text" name="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
Then add the following Home controller action for post -
[HttpPost]
public ActionResult Index(string Name, string Message)
{
return View();
}
Any reason why the first one of these modals (among even more) would appear on iOS devices?
..all of the modals appear on laptops
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="logo"><img src="../public/img/logo.png" /></div>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default center-block" data-dismiss="modal"><strong>Press This</strong></button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="item1" tabindex="-1" role="dialog" aria-labelledby="item1Modal" 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 text-center" id="item1Modal">This</h4>
</div>
<div class="modal-body text-center">
<p>
Paragraph
</p>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default center-block" data-dismiss="modal"><strong>Press This One!</strong></button>
</div>
</div>
</div>
</div>