I'm using AngularJS with html5 mode on, which is making it difficult for me to use libraries, Ratchet in particular, that are dependent on using hash URLs to show/hide information.
Here is an example of a Ratchet Modal:
Open modal
<div id="myModal" class="modal">
<header class="bar-title">
<h1 class="title">Modal</h1>
<a class="button" href="#myModal">
Close
</a>
</header>
<div class="content content-padded">
<p>The contents of my modal.</p>
</div>
</div>
Clicking on "Open Modal" tries to add "#myModal" to the URL but that doesn't match a route in $routeProvider, so it redirects to root.
Any suggestions on how to deal with this? I know people have posted that they have used angular with ratchet here: does "ratchet" play nicely with "angular.js" yet? but I can't figure it out.
Inspired by this SO post, I solve this issue use the below code:
In template, add ng-click directive in open&close button.
<a class="icon icon-more" ng-click="toggleModal()"></a>
And in controller:
$scope.toggleModal = function() {
jQuery('#myModalexample').toggleClass('active');
};
It works fine for me.
Update
About this question, a PR Specify modal selector in data attribute has been proposed to use data-modal rather than href to open/close ratchet modal.
Related
id of 1st modal is "modal1" and 2nd modal id is "modal2"
HTML code ->
1st Modal Call on Same Page
<div class="input-field col s12 m6 left-align">
<button class="btn waves-effect waves-light modal-trigger importButton" style="height:45px !important">Import Data
<i class="material-icons right">import_export</i>
</button>
</div>
2nd Modal Call on Same Page
<div class="modal-trigger" style="cursor: pointer;">
<img src="abc.png" alt="" class="circle">
</div>
JS Code ->
'click .modal-trigger': function(event) {
event.preventDefault();
$('#modal1').openModal();
},
'click .importButton':function(event) {
event.preventDefault();
$('#modal2').openModal();
}
You have to give refrence of another template {{>import}} (my template
name is import) in which my modal2 is defined.
Your question is not very clear. From what I understand, there are 2 modals that can be opened from the same template. The catch here is that bootstrap does not support multiple modals stacking up over each other.
Multiple open modals not supported Be sure not to open a modal while
another is still visible. Showing more than one modal at a time
requires custom code.
So, before the first modal is open, you must first always check if the other modal is in closed state, and similarly, before the second modal is open, you must check if the first modal is closed, if not then close it.
There is one package in meteor that appears to help handle multiple modals. you can check out peppelg:bootstrap-3-modal to get a better implementation of bootstrap modals in meteor. Specifically the part where they mention the use of below:
Modal.allowMultiple = true
I used summernote package: summernote:summernote for my website and everything work well except the feature to insert image, videos and link won't work.
Example:
Click insert link button (image and videos are the same)
A popup appear to set the link.
Click anywhere on that popup, it disappeared.
Here are my code:
post_edit.html
<template name="postEdit">
<div class="ui segment">
<form class="ui form">
<h1 class="ui dividing header">Edit post</h1>
<div class="field">
<label>Title</label>
<input type="text" id="title" name="title" value="{{title}}">
</div>
<label>Content</label>
<div class="field" id="content" name="content">
{{{content}}}
</div>
<button type="submit" class="ui orange button"><i class="edit icon"></i> Edit</button>
<a class="negative ui button delete"><i class="remove icon"></i> Delete</a>
<a class="ui button" href="{{pathFor 'postPage'}}"><i class="arrow left icon"></i> Back</a>
</form>
</div>
post_edit.js
Template.postEdit.onRendered(function(){
$(document).ready(function() {
$('#content').summernote({
height: 400,
maxHeight:800,
minHeight:250,
});
});
});
I ran into this issue myself when adding autoform-summernote to my project that already uses semantic-ui. The problem is that there's a conflict between Bootstrap's and Semantic UI's $.modal() method. See these links for code references:
Summernote modal init
Bootstrap's modal definition
Semantic UI's modal definition
Summernote expects the modal method to be Bootstrap's, but instead calls Semantic UI's modal method. Because of the differences between the implementations of the modal methods, the modal closes right away when you click anywhere in the window.
Without some low-level hacks, these two packages will conflict since Semantic UI's is available globally in your project on any $('object'). If you're not using Semantic UI's modal method anywhere else in your site, you could disable it, which will fix it in this case. However, that's not a solution that works for me. Instead, I'm looking into a solution to remove summernote, or at least its dependency on Boostrap.
Edit 1/13/2016
I ended up replacing summernote with a different editor, https://atmospherejs.com/gildaspk/autoform-medium. It gives me the functionality I need and doesn't have conflicting dependencies.
When I am opening my Reveal Modal, I would like to prevent it from closing on background click (which is a default behavior).
I am using Zurb Foundation 5.0.2.
Any help would be appreciated.
If you set the closeOnBackgroundClick option to false then your modal won't close when you click in the background.
<div class="reveal-modal" data-options="closeOnBackgroundClick:false">
Yehhhhh Finally Found It:
Put below code on your foundation reveal model. Than it not close by clicking on background or by pressing esc key.
data-options="close_on_background_click:false;close_on_esc:false;"
Ex:
<div id="AccessContainer" class="reveal-modal" data-reveal data-options="close_on_background_click:false;close_on_esc:false;">
</div>
For anyone looking at this question in 2018, I'm using Version 6.4.0 and this works:
data-close-on-click="false" data-close-on-esc="false"
I added that to the reveal div like this and it's working (as of July 2018):
<div class="reveal" id="modalVideo" data-reveal data-close-on-click="false" data-close-on-esc="false">
You can achieve this globally by executing the following line of JavaScript before showing any modals:
Foundation.libs.reveal.settings.close_on_background_click = false;
For latest version of foundation by zurb use following snippet
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
Complete Code will look like
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
If using the stand-alone Reveal plugin here: https://zurb.com/playground/reveal-modal-plugin
Use the following on the link that opens the modal.
Open Modal
This answer applies to Foundation 6. Below are the correct option for both preventing close on background click (closeOnClick:false;) and preventing close via the Esc key (closeOnEsc:false;).
<div class="reveal" id="exampleModal1" data-reveal
data-options="closeOnClick:false; closeOnEsc:false;">
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/
This question is in regards to angluarjs using bootstrap css and javascript.
I have a list of items that I want to display and set up so that clicking on them opens a dialog to allow you to change the values. Something like this:
<!-- The repeater !-->
<ul>
<li ng-repeat="item in items" ng-click="showDlg(item)">
{{item.text}}
</li>
</ul>
<!-- The dialog !-->
<div id="dlg" class="modal hide fade">
<div class="modal body">
<input id="title" type="text">
<button type="button">ok</button>
</div>
<div>
The question is how do I implement the showDlg function to put up #dlg as a pop up dialog prepopulated with the fields from item (in this trivial case putting item.text into the input box.)
I can, and in fact do, hack it by setting the values directly:
$scope.showDialog = function(item) {
$("#dlg #title").val(item.text);
$(#dlg).modal({});
}
But it seems to me that I should be using a controller for the dialog and setting it up as a form. I can see how to set it up as a form, but not how to get the data into the form to start with.
Any help would be appreciated.
If you are willing to use a 3rd party, native AngularJS directives for Twitter's bootstrap I was answering a very similar question today: https://stackoverflow.com/a/15051565/1418796
As part of the angular-ui we are working on native AngularJS directives that don't require dependency on twitter's JavaScript: http://angular-ui.github.com/bootstrap/. The advantage is that you've got less dependencies to include and directives that are well integrated into the AngularJS ecosystem.
Using the $dialog service from the mentioned repository you could edit items from a list like so: http://plnkr.co/edit/PG0iHG?p=preview
You can set the selected item in the scope
$scope.showDialog = function(item) {
$scope.selectedItem = item;
$("#dlg").modal({});
}
and update the dialog html like any other html fragment
<div id="dlg" class="modal hide fade">
<div class="modal body">
<input id="title" type="text" ng-model="selectedItem.text">
<button type="button">ok</button>
</div>
<div>