I'm new in MVC & .NET and just out of curiosity, is it possible to call a HTML file as a pop up view ? If yes how would I do it ?
Currently I have a code for pop up window inside my Index.cshtml. I want to move the part of the code that is part of the pop up window into separate file or HTML and call it based on conditions by using javascript.
Here's my code for the pop up window:
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Add To Homepage Prompt</h4>
<button type="submit" class="btn btn-primary button button4">Okay</button>
</div>
</div>
</div>
#section scripts{
<script type="text/javascript">
$("#loginModal").modal('show');
</script>
}
Related
From a view (let's say MyView.cshtml) in ASP.NET MVC application I am displaying a modal window, _MyConfirmModalWnd.cshtml. I have placed the modal window in Views\Shared folder.
Modal window is shown but some things are not working well:
Look and feel is not being show correctly
Cross button is not being correctly placed in the window
When I click on cross button it is not working, modal window is not closed.
Modal window is not being vertically and horizontally centered on the screen despite I am indicating using modal-dialog-centered class.
My modal window is shown as below:
instead of being shown with a look and feel similar to that shown in bootstrap documentation:
Modal window _MyConfirmModalWnd.cshtml:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">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">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
View MyView.cshtml (code in script section):
function askForConfirmation() {
var success = function () {
// Do something on button 'Yes' clicked
};
var cancel = function () {
// Do something on button 'No' clicked
};
var title = "Caution!";
var message = "You are about to invoice,\nDo you want to continue?";
showConfirmation(title, message, success, cancel);
}
showConfirmation = function (title, message, success, cancel) {
var modal = $("#confirmModalDialog");
modal.find(".modal-title").html(title).end()
.find(".modal-body").html(message).end()
.modal({ backdrop: 'static', keyboard: false })
.on('hidden.bs.modal', function () {
modal.unbind();
});
if (success) {
modal.one('click', '.modal-footer .btn-primary', success);
}
if (cancel) {
modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
}
};
Maybe... Do I have to import some specific javascript source files or css files in my modal view _MyConfirmModalWnd.cshtml?
UPDATE:
I have set margin and padding to 0 in the modal window _MyConfirmModalWnd.cshtml as below:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="margin:0;padding:0">
<!-- Rest of the stuff -->
</div>
...and now modal window appearance seems ok except button 'x':
However modal window is not being vertically and horizontally centered on the screen despite of indicating it by using modal-dialog-centered. Why is it not being centered on the screen? am I missing something else?
UPDATE 2:
Finally I have made some adjustments to modal window:
I have only set style="padding:0px" for outer div. Margin:0px is not necessary.
I have set style="margin-top:-30px" for close button
Below the code:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Now modal window has below look and feel:
Things remaining to do:
To center modal window vertically and horizontally on the screen.
UPDATE 3:
I have done a little more adjustments by overriding style. I have added below style attributes to the outer div:
margin-left:0px
left:42%
Additionally I have set a minimum width:
min-width:15%
With above attributes overrided, modal window is centered horizontally.
To center vertically I have to set style attribute top:40% but once I add this attribute, modal window does not show. However if I open developer tools, with them opened, in debug mode, then modal window is shown. I do not understand why modal window behaves in this way when I add top:40% attribute.... Any ideas?
below the final code:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px;margin-left:0px;left:42%;min-width_15%"> <!-- NOTE:If I add top:40% then modal window is not shown,it is not being opened. It is only shown in debug mode when I make visible developer tools window -->
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
if the page is loaded with GET parameter status=deleteSuccess (ex. localhost/index.php?status=deleteSuccess) php will insert script containing javascript DOM click() to a hidden button to open a modal. but it does not work.
I'm using bootstrap 4.3.1, I'm new at and set it up using https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
I've checked the javascript on console, it worked. I've checked the html generated by PHP, it successfully inserted the script. I've added console.log("test") on the script, it can run.
<button type="button" id="deleteSuccessBtn" style="display: none;" data-toggle="modal" data-target="#deleteSuccess"></button>
<div class="modal fade" id="deleteSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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>
</div>
<div class="modal-body" align="center">
<i class="fa fa-check-circle-o" style="font-size:48px;color:green"></i>
<h5>Data Telah Dihapus</h5>
</div>
</div>
</div>
</div>
<?php
if (isset($_GET['status'])) {
?>
<script type="text/javascript">
document.getElementById("deleteSuccessBtn").click();
</script>
<?php
}
?>
I expect to see a modal on page loaded, but it doesn't open
You can manually show or toggle the modal:
<?php
if (isset($_GET['status'])) {
?>
<script>
// assuming jQuery is available
$('#deleteSuccess').modal('show'); // or 'toggle'
</script>
<?php
}
?>
text/javascript is also the default type for script tags, so you don't need to add that.
See: https://getbootstrap.com/docs/4.0/components/modal/#methods for more information on the Modal events.
This question already has answers here:
How to open a Bootstrap modal window using jQuery?
(15 answers)
jquery click on link?
(3 answers)
Closed 3 years ago.
<div class="modal fade" id="logoutModal" 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">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Username or Password is incorrect.</div>
<div class="modal-footer">
<a class="btn btn-primary" href="login.html">Ok</a>
</div>
</div>
</div>
</div>
so i have this tag that is currently a button. When i click on this button it runs a display message.
How can i make this tag to automatically run when the page opens or reloads.
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>;
The click() method execute a click on an element as if the user manually clicked on it.
Add id on your code:
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal" id="example">Logout</a>
And use js:
document.getElementById('example').click();
You can use trigger after the page is loaded
$( document ).ready(function() {
$(".dropdown-item").trigger( "click" );
});
Based on your comment above...
I am trying to do a form where if the user enters wrong credentials
the modal will pop up.
...maybe this will help. If not, then you need to clarify what you're trying to do in your question.
In the snippet below, I have a login form. When the wrong credentials are entered, the modal appears.
$("#login").click(function () {
// Here you would do your check for correct credentials
// Obviously you wouldn't want to do this in JS in production
// I'm assuming there would be an AJAX request here that would validate the user's credentials
// If valid, proceed. If not, call the modal.
if ($(username).val() !== "blah" || $(password).val() !== "blah") {
// Username or password incorrect, show modal
$("#modal").modal();
} else {
alert("Login successful!");
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Username: <input id="username" type="text" />
Password: <input id="password" type="password" />
<button type="button" id="login" class="btn btn-info">Login</button>
<div class="modal fade" id="modal" 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">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Username or Password is incorrect.</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Try again</a>
</div>
</div>
</div>
</div>
Basically, anytime you want the modal to appear automatically (i.e., without clicking on anything), just call it like this:
$("#idOfModal").modal();
If you want to programmatically hide or dismiss the modal, you can do that by passing hide to the modal function:
$("#idOfModal').modal("hide");
you can use $("#logoutModal").modal('show')
on $(document).ready(() => ...)
$(document).ready(function() {
$("#myModal").modal('show');
});
<!-- begin snippet: js hide: false console: true babel: false -->
$(document).ready(function() {
$("#logOut").modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="logOut" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure you want to Logout?</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<button type="submit" class="btn btn-danger float-right">Yes</button>
</form>
</div>
</div>
</div>
</div>
I am trying to get a modal to appear when the button below is clicked using bootstrap. I've tested it already without the "modal hide fade" and the modal appears on the page like it should. There must be something wrong with the way I have set up the button, but I'm not sure what it is. Your help is appreciated.
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</button>
<div id="myModal" class="modal hide 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 headers
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
Remove hide class from <div id="myModal" class="modal hide fade" role="dialog">
So it should look like <div id="myModal" class="modal fade" role="dialog">
See here, seems working well - https://jsfiddle.net/VaTz88/arkbqe9j/
I am creating, upon the press of a button, a modal window that comes from an handlebars template. At the document's load, the modal window is NOT initialized so you can't tie an event to it such as :
$(".modal").attr("someAttr").change(function(){});
Here is the code of the modal window and the hidden button that can be called to show the window once it's initialized.
<script id="informationModalTemplate" type="text/x-handlebars-template">
<div class="modal fade informationModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-body">
<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">{{Title}}</h4>
</div>
<div class="modal-body">
<textarea id="informationTextContainer" name="informationTextContainer">{{Content}}</textarea>
<a onclick="" class="button button-rounded button-reveal button-medium button-green tright"><i class="icon-thumbs-up"></i><span>OK</span></a>
<a onclick="" class="button button-rounded button-reveal button-medium button-red tright"><i class="icon-thumbs-down"></i><span>Cancel</span></a>
</div>
</div>
</div>
</div>
</div>
</script>
Can someone please tell me how to detect when such a window gets closed?