ts file
html file
This is the code in my project. When clicking on modal button it's not showing anything.
HTML:
<button data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<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>
</div>
JavaScript:
declear const M;
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
have you imported the css,js correctly? can you give us more details about your code? e.g How does your .html looks like and how is your folder structure etc?
Related
I'm tinkering with DaisyUI within Vue.js 3 (porting an existing Vue+Bootstrap application to Tailwind CSS). I liked the idea that DaisyUI doesn't have JS wizardry going on behind the scenes, yet there seems to be some CSS voodoo magic that is doing things more complicated than they need to be (or at least this is my impression).
From the DaisyUI examples, here's the modal I'm trying to integrate:
<input type="checkbox" id="my-modal" class="modal-toggle"/>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label for="my-modal" class="btn">Yay!</label>
</div>
</div>
</div>
no javascript, yet the problem is that the modal will come and go according to some obscure logic under the hood that tests the value of the my-modal input checkbox at the top. That's not what I want. I want my modal to come and go based on my v-show="showModal" vue3 reactive logic!
Daisy doesn't seem to make that possible. Or at least not easily. What am I missing?
The modal is controller by the input field, so to open or close the modal just toggle the value of that input:
<template>
<!-- The button to open payment modal -->
<label class="btn" #click="openPaymentModal">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" v-model="paymentModalInput" id="payment-modal" class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label class="btn" #click="closePaymentModal">Yay!</label>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const paymentModalInput = ref()
const openPaymentModal = () => {
paymentModalInput.value = true
}
const closePaymentModal = () => {
paymentModalInput.value = false
}
</script>
I am trying to use materialize modal in Vue..
I have imported it in main.js
import 'materialize-css'
import 'materialize-css/dist/css/materialize.css'
import 'materialize-css/dist/js/materialize.js'
File.vue
<a class="fa fa-trash modal-trigger" href="#delete" #click="consolel(index)"></a>
<div id="delete" class="modal" ref="deleteModal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a
href="#!"
class="modal-close waves-effect waves-green btn-flat"
#click="deleteItem(index)"
>Agree</a>
</div>
</div>
mounted(){
M.AutoInit();
}
I tried the way, docs asked to trigger modal
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
});
In mounted.
But this didn't work.
How to trigger modal in Vue?!
Another way to do it would be to simply pass an array of vue references and derive the underlying Node from the VNode.
M.Modal.init([this.$refs['deleteModal'][0]], null)
I have a script that needs to output the results of an answer on a modal window. But currently it isn't rendering. The results output correctly outside of the modal HTML; even inspecting the modal source when it is visible shows the data isn't rendering; i.e. the results aren't hidden from view, they aren't calculated at all.
The full source is at
http://www.sic-parvis-magna.com/sicpm/mayan-vue/index.html
The variables in question are userAnswer, userAnswerDisplay, and userMessage
<div class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<div v-if="userAnswer !== -1">
<div id="user-answer" v-html="userAnswerDisplay"></div>
<div id="user-answer-message" v-html="userMessage"></div>
<div id="user-hint"></div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button modal-close">Cancel</button>
</footer>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
The problem is your modal template is outside the Vue app (i.e., section#mainapp), so that template is not processed by Vue:
<section id="mainapp">...</section>
<div class="modal">...</div> <!-- FIXME: Move this into section above -->
Move the modal into section#mainapp for the computed properties to be evaluated.
demo
I used bootstrap 3 and blueimp-gallery in a web html5. My problem is a carousel-gallery dont show images and receive a error in a console "Uncaught TypeError: Cannot read property 'style' of undefined" when i use a blueimp-gallery-carousel in a modal div, but if i enter in a developer tools for chrome, this error disappears, and the images show in carousel-gallery.
The code.
<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Vinilos</h2>
<div id="links">
1
2
3
</div>
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<p>Vinilos para rotulacion, decorativos, efecto espejo, fibra de carbono, refractivos, hologramas y farolas</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Cerrar Producto</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my javascript
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
</script>
and the link web problem
http://www.colombiawaterprint.com/web/index3.html
How i Solve this error?
I believe your problem is that your blueimp gallery is initially hidden as it is in a Bootstrap Modal. As such, when you first initialize the gallery it can't find the gallery. I think all you need to do is wait for the Bootstrap modal to be shown and then initialize the gallery.
Bootstrap triggers an event that you can listen for for this very purpose - http://getbootstrap.com/javascript/#modals-events - You probably want the shown.bs.modal event.
You would use it something like this. (assuming jQuery is loaded)
$('#portfolioModal1').on('shown.bs.modal', function (e) {
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
}
);
})
Bear in mind this is untested code and may not 'just work'. But hopefully you get the idea. You also may want to do a test to see if you've already initialized the gallery, as it stands this would re-initialize it every time the shown.bs.modal event was fired.
Here's my code:
<div class="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="tabs-1">
tab1
</div>
<div id="tabs-2">
tab2
</div>
<div id="tabs-3">
tab3
</div>
<div id="tabs-4">
tab4
</div>
</div>
<script>$(function() { $( ".tabs" ).tabs(); });</script>
The tab titles are fine however the content is not displayed properly, here's a screenshot
When I viewed firebug's code, I found that the content tabs are loaded but the content is not included in them. How to solve this?
Try the following in your script tag:
$(document).ready(function() {
$("#tabs").tabs();
});
It looks like you are trying to use the class selector with yours script.