Im making my first vue modal and I want to make a simple pop up window when you click on a button. I followed a tutorial but it wouldnt work. Then I tried others and... same result. I have no idea what I'm doin wrong!
My modal component code in the template:
<div class="save-btn">
<button #click="showModal = true">Save</button>
</div>
<transition name="modal-fade">
<div class="modal-overlay" #click="$emit('close-modal')">
<div class="modal" #click.stop>
<h6>Saved!</h6>
<p>Your Details have been saved Successfully</p>
<button>Go Home</button>
</div>
<div class="close" #click="$emit('close-modal')">
<img class="close-img" src="" alt="" />
</div>
</div>
</transition>
My modal compant code in the script:
data () {
return {
showModal: false
}
}
When I click the button :
<div class="save-btn"><button u/click="showModal = true">Save</button></div>
absolutely nothing happens and I have no idea why!
You are missing v-if for your Transition
<div v-if="showModal" class="modal-overlay" #click="$emit('close-modal')">
Also you should stick to the regular syntax so use Transition instead of transition since it is a component.
Here is the working demo of your code
Related
I am created one project. In which first I made a hover effect on image album but now I want to make an on-click event. I am trying to make this proper but not done.
I'll give the link : http://ihannoveraner.de/servicebieter/profile.html
When Click link then opens REFERENCE page. you can see hover effect on the image. that place I need click on the image and open popup
My Jquery code is:
$('.ref-img').hover(function () {
$('#MyPopup #albums a').html($(this).html());
$("#MyPopup").modal("show");
});
My Html Code:
<div id="albums"><a href="images/our/01.jpg" class="ref-img">
<div class="zoom-i">
<img class="primary" src="images/our/02.jpg">
<div class="popular-overlay">
<strong>Logo Design</strong>
</div>
</div>
<img class="secondary-1" src="images/our/03.jpg">
<img class="secondary-2" src="images/our/04.jpg">
<div class="meta">
album 1
</div>
</a>
</div>
My Modal Is:
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<div id="albums">
<a>
</a>
</div>
</div>
</div>
</div>
</div>
Above I display code. From this code on hover, image is displayed in the model but now I am trying to display modal after I click.
Second, when popup open popular-overlay id is display using opacity 1.
I am trying to build like this
link
You can do this using two ways:
using onClick attribute in an html. onClick="functionName()"
using click function on item class in jquery.
You can see this link for reference:
https://jsfiddle.net/audetwebdesign/rQdZR/
I'm unable to get my colour picker to work inside a modal. I've tried changing the z-index and adding the event handlers on modal show. Having a look at the console log and debugging the JavaScript, I can verify that the events are working but the colour values and slider positions are not updating.
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="color_picker_dialog" draggable="false">
<div class="hue_bar">
<div class="hue_picker"> </div>
</div>
<div class="sat_rect" draggable="false">
<div class="white"></div>
<div class="black"></div>
<div class="sat_picker"></div>
</div>
<div class="bottom">
<div class="color_preview"></div>
<input type="text" onkeyup="changeHex(this.value)" value="#FF0000" />
</div>
</div>
</div>
</div>
</div>
</div>
A quick example with a working colour picker and the non-working modal version:
JSFiddle
If you want to make use of the color picker events inside the modal then you could* initialize the listeners and the picker logic after the modal has been shown.
You can do that by using
$('#myModal').on('shown.bs.modal', function() {
// ... init all your modal here
});
Working example: https://jsfiddle.net/pz2Lams9/
Note, that the above code is not memory-leak save, as there are listeners added each time you show the modal. At this point you may do a revision of your code and rethink the way you connect client components with interaction logic.
Edit: you can also make use of hidden.bs.modal to unconnect your listeners and flush your variables.
Readings:
https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp
https://getbootstrap.com/docs/4.1/components/modal/#events
https://getbootstrap.com/docs/3.3/javascript/#modals-events
Note:
*I am writing "could" because I am not 100% sure if this is the only way or if there are other ways to solve this, too.
I'm pretty new to angular, and I'm trying to create a modal as a component (trying not to use ui-bootstrap or libraries) and I'm having trouble wrapping my head around it. My code:
App.component('modal', {
templateUrl: '../modal.html',
controller: ChocoListCtrl
});
I have a modal.html which I want to reference my controller which displays items inside a cart:
<h2>Your Cart</h2>
<div ng-if="!cart.length">
There are no items in your cart
</div>
<div class="col-lg" ng-repeat="item in cart | unique : 'type'">
<div class="col-md">
<span>Type: </span>
<strong>{{item.type}}</strong>
</div>
<div class="col-md">
<strong>${{item.price}}</strong>
</div>
<div class="col-md">
<span>Quantity: </span>
<strong>{{item.quantity}}</strong>
</div>
<div class="col-md">
<button ng-click="removeItem()">Remove</button>
</div>
</div>
However that's really the extent of my knowledge. I'm not sure how to make the modal popup work or even start it. Any guidance would be greatly appreciated!
It looks like you've defined your component well, all you have left to do is rig up the trigger:
<modal ng-if="showModal"></modal>
<button ng-click="showModal = !showModal">Show Modal</modal>
This may change based on the configuration of the parent element, but it's the same idea.
Then style the modal in such a way that it pops up in the desired location. position:fixed, etc.
You may want to consider dropping a backdrop behind the modal that has an ng-click attached to it to close the modal.
I have looked at a few questions on here that are having the same issue I am having, but I can not seem to resolve my issue.
I am wanting to display a modal in certain scenarios... So I will need to show/hide based on certain scenarios. This is what I have :
ASP.NET
<div class="modal fade" id="lockUser" runat="server" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Warning</h4>
</div>
<div class="modal-body">
<p>Watch out! Your about to be locked out.</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
function openModal() {
$('#lockUser').modal('show');
}
C#
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
I have the C# code in a click event, everything in the event fires except for the above line...
Maybe I a missing something really stupid
Any suggestions?
First thing to do is make sure that the openModal() method works. If it does, then move the script files (bootstrap.min.js, etc.) and functions from the bottom of your page to inside <head>..</head>.
I implemented the bootstrap model in my website.....
the model is working fine but the model does not slide from top exactly like the actual bootstrap model....
How to fix it....
Actual model
http://jsfiddle.net/nJ6Mw/1/
model not sliding from top
http://jsfiddle.net/y88WX/embedded/result/
<div id="example" class="modal hide fade in" style="display: block;" aria-hidden="false">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer"> Call to action
Close
</div>
</div>
You have got way too many resources conflicting in the fiddle that you're trying to get working, this fiddle works, so if you can put this code into the page that you're trying to load it into and it doesn't work, you know the problem isn't your bootstrap, also, please send a link to the page you're having problems with, please don't send a fiddle with many different resources attached.
You need to define options for the modal via javascript:
$(function() {
$('#event-modal').modal({
backdrop: true;
});
});
Placing all css and links/html from the site directly into fiddle is not easy for someone to jump into and debug for you.
http://jsfiddle.net/sfWBT/1/