I wan't to create a Modal with Materialize and Open it with a Button click. I used the code from the Modal page but it is somehow not working. Maybe someone can help.
I know some guys posted a similar question but none of them is answering my question.
For the modal example to work with a button to trigger the modal you'll need initialize the button using JavaScript. Be sure that you have included both jQuery, and both JavaScript and CSS from materialize—see the getting started guide.
To initialize the modal (or all modals) you'll invoke the leanModal() method on it:
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
The "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered.
Example modal button:
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Click to open modal</a>
This button would open a modal with the id modal1.
See this code pen for a working example.
Related
I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal
I have following User Interface in Modal, here I need to choose department from a dropdown(getting item list using AJAX). Here I want to make it easy to add new department by clicking button beside the dropdonw - for such popup modal with UI.
In vuejs i have code for main modal -
showModal () {
this.clearForm();
this.formInfo.formSubmitted = false;
this.$refs[this.modalInfo.id].show();
}
this is working fine. Now on click event on green button, another modal should be opened over currently opened window. Unfortunately, currently modal is get hidden and new model opened. I have following code for extra modal-
showExtraModal:function(){
this.$refs['extraModal'].show();
}
How can I solve this problem in vue js.
Seems to be a limitation of Bootstrap (see docs):
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Since bootstrap-vue is just a wrapper around Bootstrap, the same limitation will likely apply.
I had a similar problem with pure Bootstrap; IIRC I solved it by altering the content of the modal instead of showing a new one (in Vue-speak: rendering a different component), kind of a mini-routing inside the modal.
I want to load materialize modal without using button on page load. How to do that? Please help.
This will open a modal on page load. Just put it inside the document.ready function.
$('#modal1').openModal();
Be sure to replace '#modal1' with the id of the modal that you want to open.
I have a login modal on my website, where there is a form followed by a link like this :
Not yet a member ?
So, register-modal and login-modal are two different modals. Each of them has an ebedded close button :
<button type="button" id = "close" class="close" aria-hidden="true" data-dismiss="modal">×</button>
As you can see, the purpose, when the user opens the login modal, is to allow him to click on register then open the register-modal.
But if he does so, I'd like the first modal to be automatically closed. Is there is a way to do se without writing JS/jQ or do I have to handle the event with jQ (for instance, if the user clicks on "not yet a member?", close the login-modal, open the register-modal).
Thanks
For those who are interested, I didn't have to write any jQ nor handle any event. The solution is even more simple !
The only thing I had to do was to add data-dismiss="modal" to my link. As if I was dealing with a close button.
Not yet a member ?
Clicking on "Not yet a member ?" closes the current modal (login) and opens the register modal. Thanks anyway for your help
I want to create a button with Dojo that upon clicking, does dome database quering. I am using Dojo 1.9.1. My only partial success is with
<button data-dojo-Type="dijit/form/Button" type="Button" onClick="FunctionCall()">Button Name</button>
(By partial success, I mean it made it to the function in the debugger, beyond that is a whole other can of worms)
I have tried the method described in dijit/form/Button reference guide via the declarative example, but the button does nothing except hang out and look pretty.
<button data-dojo-type="dijit/form/Button" type="button">Click me too!
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
FunctionCall();
</script>
</button>
I also tried the Hello World style guide from a dojo tutorial with no success.
<button data-dojo-type="dijit/form/Button" type="button">Click me too!
<script type="dojo/method" event="onClick">
FunctionCall();
</script>
</button>
Is my first method of calling a function using this dojo button consider correct/acceptable/proper? Or are one of the tutorial methods prefered?
Is my first method of calling a function using this dojo button consider correct/acceptable/proper?
Short answer, yes, but it might not be what you want to do moving forward, as it's not "the dojo way".
If you do want to use the dojo/method method, I believe you need to set parseOnLoad to true in your dojo config. See this working fiddle for an example.
To see how you can create a button in good dojo have a look here;-)
http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html#dijit-form-button
There's discribed how to create a button declarativ or programmaticale.
Regards, Miriam
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!