CODEWITHSUNDEEP
javascriptjquery
mstef
mstef

Reputation: 1194

Simple jquery modal plugin, how to handle html content

Basically, i'm building a basic jquery modal plugin as practice, and as much as the many varieties out in the wild have been helpful for reference, I wasn't sure about the best method for pushing html into the modal that is being built in my jQuery.

This code is building my popups:

        var container = $('<div class="container"></div>');
        var header = $('<div class="modal"><div class="modal-header"></div></div>');
        var content = $('<div class="modal-body"></div>');
        var footer = $('<div class="modal-footer"><a class="secondary" href="#">Cancel</a><span id = "button-secondary-label">or</span><span class="green_btn"></span></div>');

        $(".popup").append(container);
        $(".container").append(header);
        $(".modal").append(content);
        $(".modal").append(footer);

In an html file that is calling the javascript file with the above code, I would like to pass html to modal-body. I know I could just write the following:

$(".modal-body").html("html goes here")

but I would like to make the plugin handle as much as possible, so what would be the best way to do the following:

in example.html:

 ...
<script type="text/javascript">
$(.popup).modal();
</script>
</head>
<body>
<div class="popup"><div class="body-text">I want this text in the .modal-body</div></div>

in the js file:

I would like to take the html that is in .body-text and move it into the .modal-body class, or something that will get me similar results.

Again, trying to accomplish this in the external js file, and not in example.html

Upvotes: 0

Views: 728

Answers (1)

GillesC
GillesC

Reputation: 10874

It's common to use IDs (as it can be set as the href and can be used to point to the given content of a link) instead when trying to target DOm element from modal boxes. So you could do

Some content to be in the modal

Then just grab it and append it to the cmodal

$('#boo').appendTo(content);

You can also have an option so that it can be clone and left the original copy behind

$('#boo').clone().appendTo(content);

You can technically handle classes as well but after depends how your plugin is built. As you can grab all and generate a single modal content or create the multiple content to browse between using them.

$('.popup').each(function() {
    $(this).appendTo(content);
});



var items = $('.popup'),
len = items.length,
cur = 0;

$next.click(function() {
    cur++;
    if (cur === len) cur = 0;
    items.eq(cur).show();
});

Upvotes: 1

Related Questions