Solved

Modal Not Opening

Posted on 2014-03-02
11
258 Views
Last Modified: 2014-03-03
I am trying to open a modal on this page.
http://www.bricooper.net

This is the code.
<li class=''><a href="share.php">Share</a></li>

Open in new window


The modal is share.php but it doesnt open.  What am I doing wrong?  Thank you.
0
Comment
Question by:DS928
11 Comments
 
LVL 36

Assisted Solution

by:Loganathan Natarajan
Loganathan Natarajan earned 500 total points
ID: 39899570
What is the modal plugin you use? Is it simplemodal?  .. Try to include it in the main page and call the methods?
0
 
LVL 36

Assisted Solution

by:Loganathan Natarajan
Loganathan Natarajan earned 500 total points
ID: 39899571
You can look at the example with sample implementation, here, http://www.ericmmartin.com/projects/simplemodal-demos/
0
 

Author Comment

by:DS928
ID: 39899583
Yes it is simple modal.
I am looking over it now.
I am trying to open share.php and am using contact.js
index.html
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 39899596
You have to include the JS & CSS file to call the modal. Please download the source and check how to implement,  https://code.google.com/p/simplemodal/downloads/list

"download" simplemodal-demo-basic-1.4.4.zip
0
 

Author Comment

by:DS928
ID: 39899603
They are now included.

<script language='JavaScript' type='text/javascript' src='JS/contact.js'></script>
    <link rel="stylesheet" type="text/css" media="screen" href="CSS/contact.css" />

Open in new window


I think its this line.  I don't know what to call it.

<li class=''><a href="javascript:contact('share.php',440,520)">Share</a></li>

Open in new window

0
 
LVL 36

Accepted Solution

by:
Loganathan Natarajan earned 500 total points
ID: 39899642
I think you can follow the contact form way to include. Since you need to include the external page

http://www.ericmmartin.com/projects/simplemodal-demos/

here just download "CONTACT FORM" and check the options
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39899677
You can't create a modal dialog with window.open.

Modal dialogs are pseudo dialogs created with a an overlay div that covers the page on top of which is another div that contains the dialog - i.e. all elements in the same browser window with the impression of a dialog.

Your solution is opening another browser window - which will never be modal.

To open a modal - look at www.jqueryui.com specifically (http://jqueryui.com/dialog/)

The JQueryUI library works on top of Jquey and you can use it to create a themed popup modal dialog. There are samples on the link above.
0
 

Author Comment

by:DS928
ID: 39899707
I can see that I need a modal.  I am trying to use Simplemodal.  I have the js and the css loaded. But it won't open.  I tried the demo and it works but when I move it to my page it doesn't work.  Can it be a directory pointing to the wrong place?  Its "Share Bri"
index.html
0
 

Author Comment

by:DS928
ID: 39899732
Solved it was the ID of a Div.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39899790
DS928, did you solve this yourself by catching your own coding error?  Or did the expert actually help you find this error?
0
 

Author Comment

by:DS928
ID: 39899911
A little bit of both.  I changed the name of the Div in the CSS to match the name of my Div.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question