I have a Wordpress site and I am trying to add a button to the header which opens a modal/popup to a Typeform form.
I am able to achieve this button in the body of the site, however when I try to put this button in the header, instead of opening as a modal it redirects to the actual website.
Do you have any thoughts on how to implement a modal that is triggered by a button in the header? I would like to avoid using plug-ins, however if that is the best solution I am open to it.
Welcome to StackOverflow!
I believe you could use Typeform Embed SDK to achieve what you want.
Step 1: create a button and add it to the header of your site.
Step 2: Give this button a unique id
Step 3: Add this piece of code that will create a modal/popup when the button is clicked
const reference = typeformEmbed.makePopup(
'YOUR_TYPEFORM_URL', // NOTE: Replace with your typeform URL
{
mode: 'popup',
autoClose: 3000,
hideHeaders: true,
hideFooters: true,
onSubmit: function () {
console.log('Typeform successfully submitted')
}
}
)
document.getElementById("YOUR_BUTTON_ID").addEventListener('click', function(e){
reference.open()
})
Hope it helps :)
Related
I migrated from https://apis.google.com/js/client:platform.js to https://accounts.google.com/gsi/client. I need to use a my custom google login button in order to have similar UX with other buttons.
How can I do it?
Google button works but it is rendered using google style.
window.onload = function () {
google.accounts.id.initialize({
client_id: "xxxxxxxxxxxxxxxx",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("glogin"),
{ type: "icon", size: "medium" } // customization attributes
);
//google.accounts.id.prompt(); // also display the One Tap dialog
}
My custom html button is:
<li id="glogin"><img src="assets/images/land_login/auth_google.png" alt=""></li>
Please help me. I can't found solution on google official documentation.
I faced same issue and it seems we cannot use custom button with gsi.
However, you can modify iframe render button by using given options.
It was not enough to me btw.
If you go with html api, you can generate Html code.
If you go with javascript api, you can check the options here.
I am trying this node package now. I will let you know if it works.
I want to add some fields to popup dialog which appears when user click on verification email link sent to there email. Actually i want to extend the sign up process. So when user clicked on verify link i want to show some more fields like zip code and date of birth in popup and on clicking save those fields should save to user modal.
Any help will be highly appreciated. I am new to meteor.
I am using ian:accounts-ui-bootstrap-3 for sign up process.
Some more details if needed !
With the following package, you can replace templates :
https://github.com/aldeed/meteor-template-extension
So you create your own template, then replace the default one :
Template.emailVerifiedDialog.replaces("_justVerifiedEmailDialog")
Your dialog will be shown on every pages, you have to add the behaviour to make it visible when necessary
Template.emailVerifiedDialog.helpers({
visible: function () {
return loginButtonsSession.get('justVerifiedEmail');
}
And manage click button event :
Template.emailVerifiedDialog.events({
'click #just-verified-dismiss-button': function () {
loginButtonsSession.set('justVerifiedEmail', false);
}
});
Ok, i found solution myself.
Here it is if some one else also looking for this.
We can override email popup dialog by overriding login_buttons_dialogs.html file in /meteor-accounts-ui-bootstrap-3 folder.
I'm trying to duplicate the behaviour of the "Share on Facebook" button from Youtube. Basically, inside a Flex app I'll have a button and when I click it I want a popup that enables me to post something on the wall.
While it is possible to make a call to javascript to open the pop-up I want to be able to set the images and the text of my posting.
Do you know how I could set the images or text as a paramter to the sharer window?
Thank you!
This is fairly straightforward to do. Youtube uses the Facebook API which pops up a new window (Info on Facebook sharer API).
To do this in flex,
Create a button that onClick will call a javascript method, ExternalInterface.call("fbLink", "www.yahoo.com");
In your HTML file (most likely index.template.html) add the JavaScript method, fbLink which does the following:
function fbLink(url) {
window.popup("http://www.facebook.com/sharer.php?u=" + url, {height:440, width:620, scrollbars:true})
}
Now when a user clicks on the button they will be sharing the link "yahoo.com" with facebook account.
as I understood you asking for some help in accessing js popup in html page of facebook share button, so you should use ExternalInterface in this casa and access needed DOM node using getElementById function in your js interface.
In other case I want propose you to read another one way http://www.riaxe.com/blog/flex/publish-into-facebook-wall-from-flex/
It seems that you want to have a button on the flash application and once clicked it opens the facebook page that shares the video/image that pertains to the clicked button. What you want to do is simply create a button that on click opens a new website to facebook using their share api which has the following format:
var facebookShare:String = "http://www.facebook.com/share.php?u=' + encodedVideoLink + '&t='+ encodedVideoText";
Where the u parameter stands for the link that you wish to share, and the t parameter stands for the title of the piece that you want to share, whether it be a picture or video.
You want to add an event listener on MouseEvent.CLICK that has as its callback function a method that handles the opening of the facebook page passing the facebookShare variable as shown above. To open another page on your browser you can use this AS3 Class called URLNavigator: http://www.danishmetal.dk/project/source/com/zorked/URLNavigator.as
To sum it up, something along these lines would do:
var facebookShare:String = "http://www.facebook.com/share.php?u=' + encodedVideoLink + '&t='+ encodedVideoText";
facebookButton.addEventListener(MouseEvent.CLICK, this._goToUrl(facebookShare));
private function _goToUrl(link:String):Function {
var window:String = "_blank",
feats = "",
thisOverlay:Object = this; // to not lose scope when returning a func
return function (e:MouseEvent):void {
trace("Opening link to:"+link);
try { URLNavigator.ChangePage(link, window, feats); }
catch (e:Error) { trace("error launching "+link+" in "+window+" with feature set "+feats); }
}
}
I hope that helps. If you have questions regarding the code please let me know.
I have got a jqgrid, and i would like to put a link in it to open up more details on the row in a modal window.
Everything i have read about modal windows uses a div that gets shown when you click the link, but i want to pass an id so i can just get the info i need. I know i could do it with a new window quite easly but i would like to use a modal window if poss.
Any ideas how i could do this. I'm using asp.net if thats going to be relevent.
Cheers
Luke
I'd suggest using the jQuery UI Dialog plugin for custom modal windows. You can find demonstration and documentation here:
http://jqueryui.com/demos/dialog/
In theory, to do what you're asking for, you could follow these steps:
Add a “dialog” div tag to your page.
Build the link into your data feed. If you’re using a XML data type make sure you use a CDATA flag to encapsulate your link so that they XML may be parsed correctly.
< cell>< ![CDATA[< a href=”javascript:showDialog(‘551’)”>text]]>< /cell>
In this instance, since we know the actual id at the time the link is create, I pre-populated the id (e.g. 551) in the function. This could also be retrieved from jqGrid API with the selrow property. It’s your call. If you use a JSON data type, the idea would similar. You wouldn’t have to worry about the CDATA qualifier.
Create a local function (e.g. showDialog (id)) to correspond to your link.
Add code in the showDialog function to populate and open the modal dialog. Using an AJAX call to gather specific data for this record, create the dialog content and populate the dialog using the jQuery .html method.
function showDialog (id) {
$.ajax({
url: "feed.aspx?id=" + id,
success: function(data) {
var content = // TODO: create dialog layout here
$("#dialog").html(content);
$("#dialog").dialog({
title: 'Record Details',
modal: true,
closeOnEscape: true,
width: 300,
height: 200,
buttons: false,
position: "center",
});
$("#dialog").dialog("open");
}
});
}
This is just one way to skin the cat. You should be able to use more of a jQuery approach with the link creation. If desired, rather than building the specific link the data feed, you could add jQuery click event bindings to handle the request. It’s your call. You could also add the dialog div dynamically to your page using jQuery rather than just placing it manually like I described above. It might be a little more elegant looking but would achieve the same goal.
I am attempting this late. May be you have an answer. Thought this will help others.
The #dialog code can be done as suggested by gurun8. This needs to be wired to the jqgrid. There is a onSelectRow event which triggers whenever a row is selected in jqgrid. Refer documentation. I usually add autoOpen: false, to the dialog constructor.
You need to add the onselectrow event to the grid (jqgrid function as shown below) and you can pass the id to the function. This id is the unique identifier in the jqgrid. Make sure there are no syntax errors, add comma wherever appropriate.
$s("#list").jqGrid({
...
onSelectRow: function(id){
console.log("row is selected"+id);
$url = "your_url/";
$s('#dialog').load($url);
$s('#dialog').dialog('open');
}
...
});
So I have a rather odd issue that I wanted to see if anyone has some insight into.
I have a page in which I display a grid of files that have been uploaded to our server. The toolbar for the grid provides them with the ability to upload more files. When they click the "Add File" button on the toolbar, a jQuery UI Dialog modal window appears with a simple file upload control in it. After they select a file, they click the "Upload" button on the Dialog which submits the underlying form for uploading. Also note that because I'm using asp.net, there is only one form on the page so I'm not submitting the wrong form.
Now... when I attempt to look for uploaded files on the backend, no files are uploaded. What's worse, if I move the upload control out of the dialog div and use it straight from the page without a dialog, the uploads work fine.
This leads me to believe that even though I am defining the div that will become my dialog within the main form to allow it to submit with a postback, jQuery is somehow moving it or disassociating it from the form.
Is this possible? Or is there something else I may be missing? I can't seem to find any documentation that says either way. Thanks in advance!
You need to move the dialog to inside the form.
var dialog = $("#dialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Upload": function() {
__doPostBack('uploadfile', '');
$( this ).dialog( "close" );
},
Cancel: function() {
$(this).dialog("close");
}
}
});
dialog.parent().appendTo($("form:first"));
You're right. Dialog moves its content outside of its form, and appends it to body. Probably to gain better control of the DOM, to make sure it always displays in the center, above everything else, and is not contained in some absolutely positioned DIV or so...
What is occurring here is that the Block UI removes all click functionality on buttons within its modal. To get around this the best solution I have found is to have a hidden button which will then do the desired processing.
Here is an example:
HTML
<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" />
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" />
Javascript/Jquery
function UploadFiles()
{
$.unblockUI({
onUnblock: function() {
$('[id$=btn_UploadClick]').click();
}
});
}