I have an MVC app with a Bootstrap Modal declaration in my _Layout.cshtml and I call with some Javascript which loads a MVC partial view into the modal. Everything seems to work fine except that the outer area of the modal is not grayed out showing the user that they can't click anywhere outside of the Modal. In other words the parent page looks like it's active and the Modal is just sitting on top of the parent page.
I've done some searching but I'm not finding anything I can try to get it to show the parent page as being disabled.
Here is my code in my _Layout.cshtml page.
#******** Bootstrap Modal - used with Partial Views ************************#
<div id="modal-container" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content" id="modal-content">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// Attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
/***** Vertically center Bootstrap 3 modals so they aren't always stuck at the top ********/
$(function () {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function () {
$('.modal:visible').each(reposition);
});
});
</script>
Related
I am using Hiddenvariable here and it is passed to controller from view.
#(Html.Search("ConfigurationSearch").Form("ConfigurationForm").Grid("gridConfiguration").ShowUnSelectAll(false))
<div id="gridConfiguration"></div>
</div>
#Html.Hidden("hidSearchText")
$(function () {
$('#searchText_ConfigurationSearch').val("#TempData["SearchText"]");
});
$('.k-block').click(function () {
$("#hidSearchText").val($("#searchText_ConfigurationSearch").val());
});
Without using hiddenvariable Can we Implement this,Please suggest me?!
The issue I am facing now is a button click event is automatically being fired when enter key is pressed in Html.TextBoxFor(). I am having a main view. In this view there are 3 buttons. On each of 2 button click a partial view is opened and during 3rd button click, a new view is opened. Please see the code below :
<script>
$(document).ready(function () {
SetUpDatePickers();
});
$('#button1').click(function (event) {
$('#divdefinetraj').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
GetTrajectories();
});
$('#button2').click(function (event) {
$('#divRequestTT').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
});
$('#button3').click(function (event) {
window.location.href = '/UserManagement/UsersList/';
event.preventDefault();
});
</script>
I clicked button1 and the first partial view is opened :
The partial view has below code :
#Html.TextBoxFor(u => u.TrajName, new { #class = "txtboxclass", #id = "TrajName" })
My issue is when I press "Enter" key inside this text box, the code for button1 in main view is being executed :
$('#button1').click(function (event) {
$('#divdefinetraj').toggle();
$('#button1').hide();
$('#button2').hide();
$('#button3').hide();
event.preventDefault();
GetTrajectories();
});
This results in all the buttons being hidden and the view becomes useless unless user reloads the view forcefully.
I tried to handle the onchange() event of the textboxfor and redirected to below function, but it doesn't handle.
function EnterKeyFilter() {
if (window.event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
}
Even I tried the same function for div - click() .. It doesn't work.
When I press the enter key the exact button1 click is being handled with this information event = j…y.Event {originalEvent: MouseEvent, type: "click", timeStamp: 7055.025000000001, jQuery110208686809991100928: true, toElement: button#button1.
But I am not clicking it either. The partial view is not part of a form also and form submission is not the issue. I am new to ASP.NET MVC and confused with this strange behavior. Please help. Thanks in advance.
If you want to disable your press enter in your keyboard, try this:
$(function () {
//On your document ready function, add this:
$('html').bind('keypress', function (e) {
if (e.keyCode == 13) {
return false;
}
});
}
Try to keep all three buttons in different form tags and made them submit button.
So in this case, whenever you hit enter in a form input, respective button will be clicked. To prevent full page postback, use e.preventDefault() in button click event.
HTML:
<form id="frm1">
-------------
-------------
<input id="btnSubmit" type="submit" value="submit" />
</form>
jQuery
$("#btnSubmit").click(function(e){
e.preventDefault();
-- rest of code
});
after close the popup display's overlay not remove ,
i write javascript and it's button code
plz help me
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
$('#Button1').click(function () {
overlay.fadeIn(1000);
overlay.appendTo(document.body);
$('#popup').fadeIn(1000);
}
);
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function () {
$('.popup').fadeOut(1000);
overlay.appendTo(document.body).remove();
return false;
});
});
and some other code
<div class="popup" id="Div1">
<div class='cnt23'>
<img src="../images/Power-Shutdown-2.png" class='x' id='Img1' />
<br />
<br />
<form action="" method="post">
</form>
</div>
</div>
how i can remove overlay that is display after close popup
update same that:
$('.close').click(function () {
$('.popup').hide();
$('#overlay').remove()
return false;
});
You're appending it to the document a second time and then removing the second one:
overlay.appendTo(document.body).remove();
The first one remains unaffected.
If the overlay is already on the document, then you can reference it by its id. Something like this:
$('#overlay').remove();
You may even be able to remove the previously appended variable (haven't tested this, but worth a try):
overlay.remove();
Or perhaps, before attempting the above, update the variable when originally setting it to the one which was appended (in $('#Button1').click:
overlay = overlay.appendTo(document.body);
If that works (again, haven't tested it, just an idea) then it would remove the need to query the document again with the main jQuery function.
I have 2 kendo window in 2 different pages with same grid content(url of partial view). these 2 pages are also partial views.And these 2 views are rendered in tabstrip. When open these two tabs, the window in second tab open with empty grid, any solution for this? help me please!
this is my window,!
#(Html.Kendo().Window()
.Name("headerWindow")
.Title("Select Option")
.Visible(false)
.Draggable()
.Width(500)
.Height(300)
//.LoadContentFrom("/asset/AccountGridPopup")
)
</div>
<script>
$(document).ready(function () {
var WindowForheader = $("#headerWindow").data("kendoWindow");
$("#acountCode").dblclick(function () {
//$("#accounttWindow").data("kendoWindow").center().open();
orisWindoOpenForHeader("/AssetTransaction/AccountGridPopup");
//alert("done");
});
function orisWindoOpenForHeader(url) {
WindowForheader.refresh({
url: url
})
WindowForheader.center().open();
}
});
To dynamically create unique grids do something like this in your view:
#{
var gridId = Guid.NewGuid().ToString();
}
<script>
$("##gridId").data("kendoGrid").bind("change", onAccountGridRowSelected);
</script>
#(Html.Kendo().Grid<MyModel>()
.Name(gridId)
.Columns(c =>
{
...Etc
)
I have a div that needs to be hidden by default. It then can be toggled by a button:
<script type="text/javascript">
function toggle() {
text = document.getElementById('add_view');
var isHidden = text.style.display == 'none';
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function () {
toggle();
$("#add_view, #btnToggle").click(function (e) {
e.stopPropagation();
});
$(document).click(function () {
toggle();
});
}
);
</script>
It is working fine. The only problem is, when I refresh the page, I momentarily see the div before it is hidden.
What could I do to prevent that?
Thanks
You probably need to hide your element by default, and then use the button to toggle visibility. Try this:
<div id="add_view" style="display:none">....</div>
Make the element hidden in your html to begin with.
<div id="add_view" style="display: none;"></div>
Initially, you have to hide it by setting style="display:none;" of the div. Once when u want to toggle it, you have to use it as
document.getElementById(Id).style.display="";
in javascript.