Adding navigation buttons to a popup: A step-by-step guide

I have created 2 popup boxes. Each popup contains two hyperlinks: NEXT and PREVIOUS. When a user clicks on any hyperlink, the next popup should be displayed according to the link. Can someone please provide a quick and simple way to implement this using JavaScript/jQuery?

Any help would be appreciated.

HTML

<a href="#openModal1">Open Modal1</a>

<div id="openModal1" class="modalDialog">


<div>  <div class="pop-header">
                        <a href="#"> &nbsp; < Previous </a>&nbsp; &nbsp; 
                         <a href="#">Next  ></a>
                        <a href="#close" title="Close" class="close">X</a>

                    </div>





                     <div class="row">  

                        <div class="main-content">
                            <div class="col-md-4" ><img src="http://preview.turbosquid.com/Preview/2014/07/11__06_24_26/OpenCardboardBox_2.jpg86a9e6a0-b552-4bfe-8923-71a6f174e5faOriginal.jpg" class="main-logo"/></div>
                             <div class="col-md-8"><h3>Lorem: Ipsum </h3><h4>Lorem: Ipsum</h4>is simply dummy text of the printing Lorem Ipsum is simply dummy text of the printing </div>
                         </div>

                    </div>

                        <div class="scroll-bar">
                        <div class="main-content">
                         <img src="http://99layer.com/wp-content/uploads/2013/07/Demo-website-Swiftlet2.jpg" class="main-img"/>
                        </div>
                         </div>


            </div>


</div>










<a href="#openModal2">Open Modal2</a>

<div id="openModal2" class="modalDialog">


<div>  <div class="pop-header">
                        <a href="#"> &nbsp; < Previous </a>&nbsp; &nbsp; 
                         <a href="#">Next  ></a>
                        <a href="#close" title="Close" class="close">X</a>

                    </div>





                     <div class="row">  

                        <div class="main-content">
                            <div class="col-md-4" ><img src="http://preview.turbosquid.com/Preview/2014/07/11__06_24_26/OpenCardboardBox_2.jpg86a9e6a0-b552-4bfe-8923-71a6f174e5faOriginal.jpg" class="main-logo"/></div>
                             <div class="col-md-8"><h3>Lorem: Ipsum </h3><h4>Lorem: Ipsum</h4>is simply dummy text of the printing Lorem Ipsum is simply dummy text of the printing </div>
                         </div>

                    </div>

                        <div class="scroll-bar">
                        <div class="main-content">
                         <img src="http://99layer.com/wp-content/uploads/2013/07/Demo-website-Swiftlet2.jpg" class="main-img"/>
                        </div>
                         </div>


            </div>


</div>

CSS

.pop-header
    {
         width: 100%;
         background-color: #E0E0E0;
         height: 60px;
         line-height:50px;

    }


    .pop-header > span{
        margin: 10px 20px;
        color:#000;

    }


.pop-header > a{
    text-decoration: none;
    color: #000;
}
    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }


    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 600px;
        position: relative;
        margin: 2% auto;
        padding: 0;
        border-radius: 5px;
        background: #fff;
        height: 100%;
    }

    .close
    {
        float: right;
        padding: 20px;
    }

.main-content
{
    padding: 30px;
}
.main-logo  
{
    height: 130px; 
    width: 130px;

}

.main-img
{

    width: 100%;
    height: 400%;

}
.scroll-bar
{
    width: 98%;
    height: 100%;
    overflow-y: scroll;
    margin-top: 20px;

}
javascriptjqueryhtmlcsspopup

Answer №1

This particular solution functions seamlessly without the use of JQuery or JavaScript. Feel free to customize it to suit your specific needs.

        <!DOCTYPE html>
        <html>
        <head>
            <title>Developing a modal window with HTML5 &amp; CSS3</title>

            <style>
                .modalDialog {
                    position: fixed;
                    font-family: Arial, Helvetica, sans-serif;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: rgba(0,0,0,0.8);
                    z-index: 99999;
                    opacity: 0;
                    -webkit-transition: opacity 400ms ease-in;
                    -moz-transition: opacity 400ms ease-in;
                    transition: opacity 400ms ease-in;
                    pointer-events: none;
                }

                    .modalDialog:target {
                        opacity: 1;
                        pointer-events: auto;
                    }

                    .modalDialog > div {
                        width: 400px;
                        position: relative;
                        margin: 10% auto;
                        padding: 5px 20px 13px 20px;
                        border-radius: 10px;
                        background: #fff;
                        background: -moz-linear-gradient(#fff, #999);
                        background: -webkit-linear-gradient(#fff, #999);
                        background: -o-linear-gradient(#fff, #999);
                    }

                .close {
                    background: #606061;
                    color: #FFFFFF;
                    line-height: 25px;
                    position: absolute;
                    right: -12px;
                    text-align: center;
                    top: -10px;
                    width: 24px;
                    text-decoration: none;
                    font-weight: bold;
                    -webkit-border-radius: 12px;
                    -moz-border-radius: 12px;
                    border-radius: 12px;
                    -moz-box-shadow: 1px 1px 3px #000;
                    -webkit-box-shadow: 1px 1px 3px #000;
                    box-shadow: 1px 1px 3px #000;
                }

                    .close:hover {
                        background: #00d9ff;
                    }
            </style>
        </head>

        <body>

            <a href="#openModal">Open Modal</a>
            <a href="#openModal2">Open Modal</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#openModal2">Next</a>
                    <a href="#close" title="Close" class="close">X</a>
                    <h2>Modal Box 1</h2>
                    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
                </div>
            </div>
            <div id="openModal2" class="modalDialog">
                <div>
                    <a href="#close" title="Close" class="close">X</a>
                    <a href="#openModal">Previous</a>
                    <h2>Modal Box 2</h2>

                    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
                </div>
            </div>

        </body>
        </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for enabling form resubmission in AngularJS when encountering a Sequelize validation error

Having issues with the form.$valid property in my SignUp controller for user registration. It seems to be stuck at false when a validation error is thrown by Sequelize. Any suggestions on what I should modify in my controller? Perhaps resetting the $vali ...

javascriptangularjs

Stylized border on grouped sections

I am facing a design challenge with 2 columns, floated to each side, and I am looking to incorporate a 1px width line separator that extends from the top to the bottom of the longest column. I am avoiding the use of TABLE layouts and I am unsure of which ...

css

Unable to produce audio from files

Attempting to incorporate sound files into my project using https://github.com/joshwcomeau/redux-sounds but encountering difficulties in getting it to function. Below is the code snippet I utilized for setup. Unsure if webpack is loading the files correctl ...

javascriptexpressreactjsreduxhowler.js

Save to clipboard without the use of Flash technology

In my search for a way to copy text to the clipboard, I have come across many solutions that either rely on flash or are designed for websites only. I am in need of a method that can copy to the clipboard automatically without flash, specifically for use ...

javascriptjqueryclipboard

Utilizing JQuery version 1.8.0 to seamlessly send files through forms using AJAX technology

Initially, I believed this issue was related to CakePHP development. However, after receiving an answer, I discovered that it had wider implications. Here is the revised question to reflect the more general nature of the solution. I am working on a form ...

jqueryajaxformscakephpcakephp-2.3

Don't allow users to switch views without saving their changes

We are working with a Backbone.js application that presents various forms to users. Our goal is simple: if a user navigates away from the page without saving the completed form, we need to show a confirmation dialog. When dealing with traditional forms, i ...

javascriptbackbone.js

Could anyone point out the issue with this JavaScript code?

Wanted to challenge your coding skills with this one! Can you identify the issue in the code below? function run(){ for(var i=0;i<arguments.length;i++){ var type=arguments[i].split(" ")[0]; if(type=="(write)"){ var arr=arguments[i].split(" ") ...

javascript

Fluid active tabs are causing alignment issues with CSS triangles

I have included CSS triangles on the active tabs with fluid width on this page, but they are not aligned properly in each tab. For example, the About Us tab is correctly and centrally aligned, but the others are too far to the right. The issue lies with t ...

css

An effective method for converting MongoDB's JSON array of UTC dates to local time using Node.js

Using Node.js to query MongoDB and encountering an issue with Date (ISODate) fields. After querying, the Date format returned is as follows: DT : 2014-10-02T02:36:23.354Z The goal is to efficiently convert the DT field from UTC to Local Time ISOString. F ...

javascriptjsonnode.jsmongodb

The checkValidity function fails to identify incorrect "tel" input

In my form, I am using the checkValidity function to validate inputs. However, I have encountered an issue where the validation only works when an input with the required attribute is missing a value. It doesn't work if there is a value type mismatch, ...

javascriptjqueryhtmlformsvalidation

Utilize jQuery ajax to handle form and URL processing via a GET request

When it comes to processing forms, I want to use the jQuery $.ajax GET method so that the query parameters are included in the URL. If I handle the form without using jQuery, achieving this is not a problem. However, when I utilize jQuery's $.ajax met ...

jqueryajax

Exploring Substrings in jQuery/JavaScript

Issue Can anyone help me with locating a specific set of words within a string (gval in this scenario) that defines the specific wordset? if (gval.indexOf("define") > -1){ console.log("Hey! gval has Define"); } var gval = input.val().trim().toLowe ...

javascriptjquerystringkeyword

The function getoffer does not exist

I am encountering an issue with my factory declaration for Malls. It seems that I am getting the error message get offer is not a function! .controller('confirmCtrl', function($scope,Malls,$stateParams,$log) { $scope.offers = Malls.g ...

javascriptangularjsangularjs-scope

How can a browser reload a document when navigating back to the previous page?

I am facing an issue with the browser's built-in go back function. Imagine I have two pages: Page1 and Page2. Page1 downloads a .json file and displays its contents on the webpage. On Page2, users can add new data to the .json file. However, if a ...

javascriptjqueryhtmljsonbrowser

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar

Version 10 of Internet Explorer seems to be overlooking the XMLHttpRequest setting of 'xhr.withCredentials = true'

Encountering an issue with a cross-domain ajax call in IE10 (in IE10 mode, not compatibility). Situation: Two domains involved, http://a and http://b. Cookie set for http://b. Currently on page http://a. Goal is to make a CORS request to http://b using X ...

javascriptajaxinternet-explorercors

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

htmlcssfontsw3c-validation

What is the best way to incorporate ajax into a Wordpress theme?

I'm currently attempting to incorporate ajax functionality into my WordPress website There are two essential files for this task: a PHP file and a JS file Here is an example of the PHP code located in combo_check-out.php function iRange($first, $la ...

javascriptphpjqueryajaxwordpress

Unable to choose multiple options within a selection field

My webgui testing involves the use of selenium, which includes the following method: protected static selectListItems(String id, String value1, String value2, String value3,String value4){ String values = "" if(StringUtils.isNotBlank(value1)) ...

javascripthtmlseleniumselectgroovy

Achieving background stretching across different browsers with background-size functionality

I'm faced with a dilemma regarding a background image that is 40px wide and 1200px high, which I want to use as the background for a website. Since most users' monitors are not larger than 1200px, I can easily fill the background by setting "back ...

cross-browsercss