I'm trying to use the materialize modal in my laravel app, I've got a blade file called skeleton which I put all my "scripts" in and stylesheets etc. That yeilds the sections which I define in my single blade files. That works great, however I've had loads of issues with materialize lately.
When I try to use the modal, I use this code from the docs:
$(document).ready(function() {
$('.modal').modal();
});
That's at the bottom of my skeleton file and shows at the bottom of every file. I've tried putting it in my file itself and it didn't work.
My HTML looks like this:
#if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
href="#modal1"> Create</a>
#endif
at the bottom of the blade file:
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
My modal appears on screen, but it's automatically "shown" and when I click the open button it doesn't do anything. I'm just using the demo modal, I'll customize it when I can get it to work, thanks.
Here you go with a solution
For opening a modal please use the below code
$('.modal').modal('show');
For closing a modal please use the below code
$('.modal').modal('hide');
It's opening automatically because of
$(document).ready(function() {
$('.modal').modal();
});
Whenever the doument is ready then it's opens the modal.
On click
#if($auth >= 5) Create
#endif
Open the modal using $('.modal').modal('show');
Ok, first up, why two href's on the modal trigger?
#if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
href="#modal1"> Create</a>
#endif
Take one off, and let's take it from there.
The answer above incorrectly states that the init below opens the modal:
$(document).ready(function() {
$('.modal').modal();
});
This is just the initialisation, it plugs into the JS to allow it to work.
<!-- this is the initialisation -->
$('.modal').modal();
<!-- this is instruction to open -->
$('.modal').modal('open');
Check the pen here for the two commands, comment each out to see what happens.
Modals are closed by default, and are triggered by clicking the .modal-trigger or using the open command above..
I was being stupid, I had bootstrap js linked for some reason and they were conflicting. Sorry to waste anyone's time.
Related
When I close my modal, the video keeps playing in the background. It is a really small program with only HTML and CSS, so I don't want to use the YouTube API. This is my modal code:
<div id="lucaModal" class="modal modal-fullscreen" role="dialog">
<button id="lucaButton" class="btn btn-danger closeIFrame" data-dismiss="modal">
CLOSE
</button>
<div class="modal-content">
<iframe class="trailer" id="trailer" title="YoutubeVideoPlayer"
style="height: 100%; width: 100%;"
src="https://www.youtube.com/embed/mYfJxlgR2jw" frameborder="0">
</iframe>
</div>
</div>
I tried jQuery, but my modal wouldn't close this way:
$(document).ready(function(){
$("#lucaModal").modal('show');
$("#lucaButton").click(function(){
$("#lucaModal").modal('hide');
});
});
So I've played around with your code and found a way around this.
Below I used JQuery to solve your.
//below is click detector that checks if the user has clicked anywhere
$('body').on('click',function(){
//if the modal is no longer visible on the screen
if(!$('#lucaModal').is(':visible')){
//we get the src of the current video
var trailer = $('#trailer').attr('src');
//and reset it, that will sort out your problem
$('#trailer').attr('src',trailer);
}
});
Just copy and paste the code above to your js file and see if it works. If it does then play around with it, maybe you can create an even better way of handling this issue.
Thanks.
EDIT FINAL:
Along with the accepted answer, I had to figure out how to close the modal which was not the same as just hiding a dialog in this case.
This bit of javascript helped me to get the modal closed, hide the backdrop, and close it to the point where it would let me reopen another different one on the page.
<script>
$(document).on("click", ".btnCloseDeviceActivityModal", function () {
var deviceActivityModal = $('.deviceActivityModal');
deviceActivityModal.hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
</script>
EDIT: Wanted to point out that when I debug it shows me that it is calling back into my partial view controller every time I close the modal. So it is loading it entirely including going back to the controller and querying the database. It is actually calling the javascript method every time I close the window.
Also wanted to add that I tried changing to an onclick="doModal()" way of clicking the button and named the method in javascript to doModal(). I still get the same behavior of the reopening when closing.
Some more observations is the button loses all text and is just a little square after it is clicked the first time. I can see this in the background of the modal. The other interesting thing is the background (outside) of the modal gets darker and darker each time I click the close button on the modal.
I have a modal window that is displaying a partial view. Every time I click the close button it is just opening right back up. I've tried setting it with 'hide' in javascript. I tried some completely boilerplate modal so I think it is how I am calling the modal that is the problem.
This is how the modal is being initiated off of this button click:
<button data-url="#Url.Action("DeviceActivity","Devices", new { #id = item.DeviceId })" class="btn btn-primary btnOpenDeviceActivityModal">Activity</button>
Here is the javascript that loads the modal window from the data retrieved in the controller. It displays the partial view in the modal successfully:
#* Display the device activity in a modal window. Data is loaded from the partial View *#
<script>
$('.btnOpenDeviceActivityModal').click(function () {
var url = $(this).data("url");
$(this).load(url, function () {
$("#deviceActivityModal").modal("show");
});
})
</script>
And just for fun even though it doesn't seem to matter, here is my modal partial view:
<div class="modal fade" id="deviceActivityModal" style="margin-left:100px; margin-top:80px">
<div class="modal-dialog-scrollable" style="top:180px; right:200px">
<div class="modal-content" style="width:1000px; max-height:800px;">
<div class="modal-header">
<button id="closeModal" type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<h2 style="text-align:center">Device Activity Records</h2>
<table class="table table-striped table-bordered">
<thead class="thead-light">
<tr>
<th>
Activity Date
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.DeviceActivityRecords)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ActivityDate)
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
What is it that is causing my modal window to reopen each time it is closed. It also seems that anywhere I click on the modal will close (and reopen) it. I dunno if it is related so that's why I bring it up. How can I get it to close and stay closed? Other answers here on SO have some obvious problems with modal code, but I am not seeing what is wrong with how I am calling the modal (which seems to be the common problem because I replaced the modal code entirely to test).
$(this).load is injecting your modal markup inside the button - that's probably not what you want. I'm assuming you meant to use $.get, which does work a bit differently.
$('.btnOpenDeviceActivityModal').on('click', function () {
var url = $(this).data("url");
$.get(url)
.done(function (response) {
$(response).modal("show");
});
});
This will use the markup returned from the AJAX call as the target of the .modal() function - probably want to add some sanity checks around that.
For reference:
$(selector).load() : https://api.jquery.com/load/
$.get(): https://api.jquery.com/jQuery.get/
I have ian:accounts-ui-bootstrap-3 installed. I want a sign-in / sign-up button in the center of my home page.
Right now, {{> loginButtons}} gives the "Sign in / Sign up" dropdown, but it's a hyperlink. How do I make the link a button?
Embedding it in html tags doesn't work:
<button type="button" class="btn btn-info"> {{> loginButtons}} </button>
What I did was to remove the ian:accounts-ui-bootstrap-3 and use instead the default accounts-ui.
Then I add the following in my js files (on the client)
Template.loginButtons.rendered = function(){
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
This should show all buttons and inputs without weird dropdowns. I would then style it by replicating bootstrap styles if needed.
Hope this helps.
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>
I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:
The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only class="modal" the modal displays by default when the page loads and will not close. If I include class="modal hide" then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.
I'm not making any big departures from the modals sample code on the Bootstrap site, any ideas what's going wrong?
Here's the button that's supposed to launch the modal:
<a class="btn" data-toggle="modal" href="#testmodal" >About</a>
And here's the modal itself:
<div class="modal hide fade in" id="testmodal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js
Glad your problem is resolved.
Also if you want the default bootstrap functionality without customizing anything just use the big download button on the main page. This zip file contains a default bootstrap.min.js file that includes all the plugins (like the modal dialogs etc). If you use that one instead of all the seperate javascript files your page has to make less requests and load faster.
your close link should be like this:
<a class="close" data-dismiss="modal">×</a>
since, data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.