pop panel script - mucks up the jQuery tab bar

Report · Feb 19, 2019

I wonder if anyone can help

I am using jQuery tabs bar from dreamweaver plugins I want to add a popup window

I saw a link that 'Nacy Oo Shea' uploaded which is prefect in the style I want but when I add the code it destroys the tab bar, not sure how to correct this to get the tab bar to work.

Also is there away to get the popup window to open when you click on the button and not auto load up

Thanks

Tim

------

<!doctype html>

<html>

<head>

<!--popup start>

<!--[if lt IE 9]>

<![endif]-->

<!--popup end>

</head>

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">OPEN MODAL</button>

Modal Header

</div>

<h3 class="center">Modal Body</h3>

</div>

Modal Footer

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

<body>

<ul>

</ul>

<p>Content 1</p>

</div>

<p>Content 2</p>

</div>

<p>Content 3</p>

</div>

$(function() {

$( "#Tabs1" ).tabs();

});

</script>

</script>

</body>

</html>

--------

Report · Feb 19, 2019

By adding the modal code it looks like you corrupted the existing code. Add the closing </script> tag, shown in red below, to the end of your tabs function. See if that makes a difference.

$(function() {

$( "#Tabs1" ).tabs();

});

</script>

You have also got a couple of -- dashes missing from your comment tag:

<!--popup end -- >

Although Im not sure why that comment is there as that is not where the modal code ends, so you might as well delete it.

Report · Feb 19, 2019

HI, I corrected that error but sadly that has not correct it 😞

----

---

<!doctype html>

<html>

<head>

<!--popup start>

<!--[if lt IE 9]>

<![endif]-->

<!--popup end>

</head>

<button type="button" class="btn" data-toggle="modal" data-target="#myModal">OPEN MODAL</button>

Modal Header

</div>

<h3 class="center">Modal Body</h3>

</div>

Modal Footer

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

<body>

<ul>

</ul>

<p>Content 1</p>

</div>

<p>Content 2</p>

</div>

<p>Content 3</p>

</div>

$(function() {

$( "#Tabs1" ).tabs();

});

</script>

</script>

$('#myModal').modal('show');

</script>

</body>

</html>

</body>

</html>

-----

Report · Feb 19, 2019

There are too many errors in your markup. Also, I do not see a reason for using jQuery tabs when you are already using Bootstrap.

May I suggest that you use Bootstrap 4 rather than Bootstrap 3 that you are using at the moment. If you agree with the above, please copy and paste the following code into a new document and view in a browser.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
          </button>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
              <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
            </div>
          </nav>
          <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home tab</div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile tab</div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact tab</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Wappler, the only real Dreamweaver alternative.

Report · Feb 19, 2019

https://forums.adobe.com/people/tim+cross wrote

HI, I corrected that error but sadly that has not correct it 😞

Probably best to take Bens advice on this one. I can see no reason to complicate matters by using the jQuery UI unless you are going to be doing something really fancy, its pointless for tabbed content and from what I remember presents issues if the content in each panel is of different lengths, or maybe that was the jQuery UI accordion....anyway its pretty pointless introducing jQuery UI to reproduce something simple like tabs or an accordion.

Also the reason why your modal pops open on page-load is because you are instructing it to do so by deploying the below bit of scripting.

$('#myModal').modal('show');

</script>

If this is a new project then its best to start with the most up-to-date version of Bootstrap which is 4. If this is something you are wanting to introduce into a Bootstrap 3 project then let us know and we'll try and provide some more guidance.

Report · Feb 19, 2019

Thank you all for your advice. Will redo it using bootstrap.

The jQuery tab was working fine until I tried to add the popup code and then it went all funny.

Tim

Report · Feb 19, 2019

You don't need jQuery UI if you're using Bootstrap.

Use Bootstrap's Dynamic Tabs instead of jQuery Ui tabs.

Less code, fewer conflicts.

</ul>

<p>Some content.</p>

</div>

<p>Some content in menu 1.</p>

</div>

<p>Some content in menu 2.</p>

</div>

In the future when you need to add components, start with the ones in Bootstrap before going outside the framework. And stay on top of your code errors. You'll have way fewer problems that way.

Nancy O'Shea— Product User, Community Expert & Moderator

Adobe Community

pop panel script - mucks up the jQuery tab bar

1 Correct answer