CODEWITHSUNDEEP
javascriptjqueryhtml
Uptop 14
Uptop 14

Reputation: 221

Modal Window: How can I set a different content for each modal?

I'm working on my own custom modal window, but I've a problem. I'd like to create multiple modal window, but I need to apply a different content for each.

My HTML code:

        <div id="footer">
            <div class="wrapper">
                <ul>
                    <li>
                        <a class="modal-window-trigger" id="help" href="help.php">Help</a>
                    </li>
                    <li>
                        <a class="modal-window-trigger" id="faq" href="faq.php">Frequently Asked Questions</a>
                    </li>
                </ul>
                <span id="footer-copyright">
                    <a href="./..">Coded by Dylan - ©2015-2016</a>
                </span>
            </div>
        </div>
        <div class="modal-window">
            <div class="modal-window-container">
                <span class="modal-window-closer" title="Close the overlay"></span>
                <h1 class="big-title" style="margin-bottom: 15px;">First Modal Window</h1>
                <p>First Modal Window Text</p>
            </div>
        </div>
        <div class="modal-window">
            <div class="modal-window-container">
                <span class="modal-window-closer" title="Close the overlay"></span>
                <h1 class="big-title" style="margin-bottom: 15px;">Second Modal Window</h1>
                <p>Second Modal Window Text</p>
            </div>
        </div>
        <div id="expose-mask"></div>

My JavaScript code:

(function($)
{
    $(".modal-window-trigger").click(function(e)
    {
        e.preventDefault();
        $(".modal-window").addClass("shown");
        $("#expose-mask").css({"visibility": "visible"});
    });
    $(".modal-window-closer, #expose-mask").click(function(){
        $("#expose-mask").css({"visibility": "hidden"});
        $(".modal-window").removeClass("shown");
    });
})(jQuery);

Result: http://prntscr.com/7gd7g6

I'd like to show the specific content when I click on the "Help" text and another content when I click on the "Frequently Asked Questions" text.

How can I set an unique data for each modal?

Upvotes: 1

Views: 990

Answers (3)

Ari
Ari

Reputation: 173

I just ran into the same question while creating a web app with React. First, I created a react component call GeneralModal. In the first div tag I assigned id={props.id} so that every time I want to pass in new content into the modal framework, I create a new id for the modal without having to duplicate the code. Like this:

<div class="modal fade" id={props.id} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Then, at where I want to pass in new content (modal's body), I used

<div class="modal-body">
   {props.children}
</div>

In the component I want to call the modal, I write:

<BackdropModal children={<About/>} id={"about"} next={false} title={"About Peacock"}/>

Here I am assigning an id to the general modal with content so that this id is uniquely associated with the specific content

Then, I use this button to call modal with this specific content:

<a class="nav-link" data-toggle="modal" data-target="#about" href="#about">About</a>

Upvotes: 0

Vel
Vel

Reputation: 9341

    (function($)
        {
            $(".modal-window-trigger").click(function(e)
            {
                e.preventDefault();
                var modal_id = $(this).attr('name');
                show_modal(modal_id)

            });
            $(".modal-window-closer, #expose-mask").click(function(){
                $("#expose-mask").css({"visibility": "hidden"});
                $(".modal-window").removeClass("shown");
            });
        })(jQuery);

        function show_modal(modal_id){      
            $('#'+modal_id).addClass("shown");
            $("#expose-mask").css({"visibility": "visible"});  
        }

add name attribute for <a class="modal-window-trigger" name="model1"> and change id the modal-window to model1 respectivily.

Upvotes: 1

Vel
Vel

Reputation: 9341

    (function($)
    {
        $(".modal-window-trigger").click(function(e)
        {
            e.preventDefault();
            var attrid = $(this).attr('id');
            if(attrid=='help'){
                $(".modal-window1").addClass("shown");
                $("#expose-mask").css({"visibility": "visible"});
                return;
            }else if(attrid=='faq'){
                $(".modal-window2").addClass("shown");
                $("#expose-mask").css({"visibility": "visible"});
                return;     
            }
        });
        $(".modal-window-closer, #expose-mask").click(function(){
            $("#expose-mask").css({"visibility": "hidden"});
            $(".modal-window").removeClass("shown");
        });
    })(jQuery);

change the class modal-window to modal-window1 for first window and modal-window to modal-window2 for second window

Upvotes: 1

Related Questions