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?
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'm writing a MVC project which using bootstrap. I create the button, and add event onclick function.
For the view, I have make 2 modal. The first modal id call "loadme" (just for loading message). The second modal is the result screen which contain table.
The loadme modal is simple as like
<div class="modal fade" id="loadMe" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="loader"></div>
<div clas="loader-txt">
<p>Check out this slick bootstrap spinner modal. <br><br><small>We are addicted to Bootstrap... #love</small></p>
</div>
</div>
</div>
</div>
</div>
and the main result modal as below
<div class="modal fade" id="modalwnd2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Car Model Browse 2</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;" id="CarSelectedList">
#Html.Partial("~/views/Home/_SubDemoTable2.cshtml", ViewData["CarRecords"])
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
At the tag, I have do as below
$('#cmdCustPopup3').on('click', function (e) {
e.preventDefault();
console.log('#loadMe show');
$("#loadMe").modal({
backdrop: "static", //remove ability to close modal with click
keyboard: false, //remove option to close with keyboard
show: true //Display loader!
});
var url = '#Url.Action("getCarList", "Home")';
$.post(url, { _partialViewName:'_SubDemoTable3'}, function (data) {
$('#CarSelectedList').html(data);
console.log('#loadMe need hide');
$("#loadMe").modal('hide');
console.log('#loadMe hide end, modalwnd2 show()');
$('#modalwnd2').modal('show');
},'html'
)
});
You will see , even I have added "$("#loadMe").modal('hide');", but the loadme modal is still screen. Can you advise what's wrong for that ?
Thank you
Do you added bootstrap.js in page? If not, try to include it and try again
I'm trying to pop up with bootstrap. In my "NoteListPartial.cshtml" page; if I click on the edit button, I want the "Not.cshtml" to be opened with pop up. But when I click button, nothing happens. My codes is as follows:
This is my "NoteListPartial.cshtml":
Edit
And this is my "Note.cshtml":
<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Note</h4>
</div>
<form method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label>Title:</label>
<input type="text" name="Name" value="#Model.Name" />
</div>
<div class="form-group">
<label>Content:</label>
<textarea name="Content">#Model.Content</textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Update" />
</div>
</form>
</div>
</div>
</div>
this is because id="notedetailModal" div is not on "NoteListPartial.cshtml" page.
Make change in your code like put below code in your "NoteListPartial.cshtml" page
<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
and in your "Note.cshtml" put rest of the code like
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Note</h4>
</div>
<form method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label>Title:</label>
<input type="text" name="Name" value="#Model.Name" />
</div>
<div class="form-group">
<label>Content:</label>
<textarea name="Content">#Model.Content</textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Update" />
</div>
</form>
Try this.
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.
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>